Added gallery.scss and basic build system.

leandrocryptocomp · Nov 3, 2012 · 7691d03 · 7691d03
commit 7691d03
Show file tree

Hide file tree

Showing 6 changed files with 335 additions and 0 deletions.
diff --git a/css/gallery.css b/css/gallery.css
@@ -0,0 +1,178 @@
+@keyframes controlFade-2 {
+  0% {
+    color: white;
+  }
+
+  18.75% {
+    color: #ccffcc;
+  }
+
+  50% {
+    color: #ccffcc;
+  }
+
+  68.75% {
+    color: white;
+  }
+}
+
+@keyframes galleryFade-2 {
+  0% {
+    opacity: 0;
+  }
+
+  18.75% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  68.75% {
+    opacity: 0;
+  }
+}
+
+.items-2 .control-button {
+  animation: controlFade-2 16s;
+}
+.items-2 .item {
+  animation: galleryFade-2 16s;
+}
+.items-2 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1) {
+  color: #ccffcc;
+}
+.items-2 .control-button:nth-of-type(1),
+.items-2 .item:nth-of-type(1) {
+  animation-delay: -3s;
+}
+.items-2 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2) {
+  color: #ccffcc;
+}
+.items-2 .control-button:nth-of-type(2),
+.items-2 .item:nth-of-type(2) {
+  animation-delay: 5s;
+}
+
+@keyframes controlFade-3 {
+  0% {
+    color: white;
+  }
+
+  12.5% {
+    color: #ccffcc;
+  }
+
+  33.33333% {
+    color: #ccffcc;
+  }
+
+  45.83333% {
+    color: white;
+  }
+}
+
+@keyframes galleryFade-3 {
+  0% {
+    opacity: 0;
+  }
+
+  12.5% {
+    opacity: 1;
+  }
+
+  33.33333% {
+    opacity: 1;
+  }
+
+  45.83333% {
+    opacity: 0;
+  }
+}
+
+.items-3 .control-button {
+  animation: controlFade-3 24s;
+}
+.items-3 .item {
+  animation: galleryFade-3 24s;
+}
+.items-3 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1) {
+  color: #ccffcc;
+}
+.items-3 .control-button:nth-of-type(1),
+.items-3 .item:nth-of-type(1) {
+  animation-delay: -3s;
+}
+.items-3 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2) {
+  color: #ccffcc;
+}
+.items-3 .control-button:nth-of-type(2),
+.items-3 .item:nth-of-type(2) {
+  animation-delay: 5s;
+}
+.items-3 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
+  color: #ccffcc;
+}
+.items-3 .control-button:nth-of-type(3),
+.items-3 .item:nth-of-type(3) {
+  animation-delay: 13s;
+}
+
+.gallery {
+  position: relative;
+}
+.gallery .item:first-of-type {
+  position: static;
+  opacity: 1;
+}
+.gallery .item {
+  transition: opacity .5s;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+.gallery .item, .gallery .control-button {
+  animation-iteration-count: infinite;
+}
+.gallery .control-operator {
+  display: none;
+}
+.gallery .control-operator:target ~ .item {
+  opacity: 0;
+  animation: none;
+}
+.gallery .control-operator:target + .item {
+  opacity: 1;
+}
+.gallery .control-operator:target ~ .controls .control-button {
+  animation: none;
+}
+
+.gallery {
+  animation: fadeInUp 1s;
+  text-align: center;
+  margin: 0 auto;
+  max-height: 100%;
+}
+.gallery .controls {
+  animation: fadeInUp 2s;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -50%;
+  z-index: 2;
+  width: 100%;
+}
+.gallery .control-button {
+  transition: color .1s;
+  font-size: 3em;
+  color: white;
+  text-align: center;
+  text-shadow: 1px 0 1px black;
+}
+.gallery .control-button:hover {
+  color: lightGrey;
+}
diff --git a/css/gallery.min.css b/css/gallery.min.css
diff --git a/grunt.js b/grunt.js
@@ -0,0 +1,39 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    watch: {
+      files: ['sass/gallery.scss', 'index.html'],
+      tasks: 'default'
+    },
+    sass: {
+      dist: {
+        files: {
+          'css/gallery.css': 'sass/gallery.scss'
+        }
+      },
+      dev: {
+        options: {
+          style: 'expanded'
+        },
+        files: {
+          'css/gallery.css': 'sass/gallery.scss'
+        }
+      }
+    },
+    cssmin: {
+      dist: {
+        src: 'css/gallery.css',
+        dest: 'css/gallery.min.css'
+      }
+    }
+  });
+
+  // Default task.
+  grunt.registerTask('default', 'sass cssmin');
+
+  grunt.loadNpmTasks('grunt-yui-compressor');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Gallery CSS</title>
+</head>
+<body>
+	<figure class="gallery animation-fade items-3">
+
+		<div class="control-operator"></div>
+		<figure class="item">
+			<h1> Gallery CSS </h1>
+		</figure>
+
+		<div class="control-operator"></div>
+		<figure class="item">
+			<h1> Gallery CSS </h1>
+		</figure>
+
+		<div class="control-operator"></div>
+		<figure class="item">
+			<h1> Gallery CSS </h1>
+		</figure>
+
+		<div class="controls">
+			<div class="control-button">•</div>
+			<div class="control-button">•</div>
+			<div class="control-button">•</div>
+		</div>
+	</figure>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+	"name": "gallery-css",
+	"version": "0.0.1",
+	"devDependencies": {
+		"grunt" : "0.3.14",
+		"grunt-yui-compressor": "0.1.1",
+		"grunt-contrib-sass": "0.1.3"
+	}
+}
diff --git a/sass/gallery.scss b/sass/gallery.scss
@@ -0,0 +1,76 @@
+$max-images: 3;
+$image-display-duration: 5; //seconds
+$cross-fade-duration: 3; // seconds
+$button-highlight-color: #CCFFCC;
+$display-duration: $cross-fade-duration + $image-display-duration;
+
+@for $i from 2 through $max-images {
+	$total-duration: $display-duration * $i;
+
+
+	@keyframes controlFade-#{$i} {
+		0% { color: white; }
+	  #{100% * $cross-fade-duration / $total-duration} { color: $button-highlight-color; }
+	  #{100% * $display-duration / $total-duration} { color: $button-highlight-color; }
+	  #{100% * ($display-duration + $cross-fade-duration) / $total-duration} { color: white; }
+	}
+
+	@keyframes galleryFade-#{$i} {
+	  0% { opacity: 0; }
+	  #{100% * $cross-fade-duration / $total-duration} { opacity: 1; }
+	  #{100% * $display-duration / $total-duration} { opacity: 1; }
+	  #{100% * ($display-duration + $cross-fade-duration) / $total-duration} { opacity: 0; }
+	}
+
+	.items-#{$i} {
+		.control-button { animation: controlFade-#{$i} #{$total-duration}s; }
+		.item { animation: galleryFade-#{$i} #{$total-duration}s; }
+
+		@for $j from 1 through $max-images {
+			@if $j <= $i {
+				.control-operator:nth-of-type(#{$j}):target ~ .controls .control-button:nth-of-type(#{$j}) { color: $button-highlight-color; }
+
+				.control-button:nth-of-type(#{$j}),
+				.item:nth-of-type(#{$j}) { 
+					$delay: #{($j - 1) * ($display-duration) - $cross-fade-duration}s;
+
+					animation-delay: #{$delay};
+				}
+			}
+		}
+	}
+}
+
+.gallery {
+	position: relative;
+
+	.item:first-of-type { position: static; opacity: 1; }
+	.item { transition: opacity .5s; width: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
+
+	.item, .control-button { animation-iteration-count: infinite; }
+	.control-operator { display: none; } // Stop hash links from scrolling up and down
+	.control-operator:target ~ .item { opacity: 0; animation: none; } // Unselected image
+	.control-operator:target + .item { opacity: 1; } // Selected image
+	.control-operator:target ~ .controls .control-button { animation: none; } // Kill button animation when there is a selected image
+}
+
+// control button support
+.gallery {
+	animation: fadeInUp 1s;
+	text-align: center; margin: 0 auto;
+	max-height: 100%;
+
+	.controls { 
+		animation: fadeInUp 2s;
+		position: absolute; bottom: 0; left: 50%; margin-left: -50%; z-index: 2;
+		width: 100%;
+	}
+
+	.control-button {
+		transition: color .1s;
+		font-size: 3em; color: white; text-align: center; text-shadow: 1px 0 1px black;
+
+		&:hover { color: lightGrey; }
+	}
+
+}