css3slideshow 0.1.1

data/lib/css3slideshow.rb

@@ -0,0 +1,10 @@
+require 'compass'
+require 'animation'
+Compass::Frameworks.register("css3slideshow", :path => "#{File.dirname(__FILE__)}/..")
+
+module Css3slideshow
+
+  VERSION = "0.1.1"
+  DATE = "2012-11-08"
+
+end

data/stylesheets/_css3slideshow.scss

@@ -0,0 +1,15 @@
+//$slide_nr_of_images: 3;
+//$slide_img_width: 680px;
+//$slide_img_height: 320px;
+//$slide_total_time: 10s;
+//
+//img {
+//  width: $slide_img_width;
+//  height: $slide_img_height;
+//}
+//
+//#slider {
+//  margin: 40px auto 0;
+//}
+
+@import "css3slideshow/slideshow";

data/stylesheets/css3slideshow/_images_animation.scss

@@ -0,0 +1,23 @@
+#{$slide_mask} /* #mask */ {
+  // Start animation.
+  li {
+    @include animation(cycle $slide_total_time $slide_timing_function infinite);
+  }
+
+  // Pause slideshow on hover.
+  &:hover li {
+    @include animation-play-state(paused);
+  }
+}
+
+// Generating keyframes.
+@include keyframes(cycle) {
+  // Start at 0 percent.
+  $slide_percent: 0%;
+  @for $i from 0 through $slide_nr_of_images - 1 {
+    #{$slide_percent} { @include transform(translateX(-$slide_img_width * $i)); }
+    $slide_percent: $slide_percent + $slide_show_image_percent;
+    #{$slide_percent} { @include transform(translateX(-$slide_img_width * $i)); }
+    $slide_percent: $slide_percent + $slide_percent_between_images;
+  }
+}

data/stylesheets/css3slideshow/_progress_bar.scss

@@ -0,0 +1,24 @@
+#{$slide_progress_bar} /* .progress_bar */ {
+  position: relative;
+  width: $slide_img_width;
+  height: 5px;
+  background: $slide_progress_bar_color;
+  @include animation(progressBarExpand $slide_total_time ease-out infinite);
+}
+
+#{$slide_slider}:hover #{$slide_progress_bar} /* #slider:hover .progress_bar */ {
+  @include animation-play-state(paused);
+}
+
+// Generating keyframes.
+@include keyframes(progressBarExpand) {
+  // Start at 0 percent.
+  $slide_percent: 0%;
+  // Loop through all images
+  @for $i from 0 through $slide_nr_of_images - 1 {
+    #{$slide_percent} { width: 0%; opacity: 0; }
+    $slide_percent: $slide_percent + $slide_show_image_percent;
+    #{$slide_percent} { width: 100%; opacity: .7; }
+    $slide_percent: $slide_percent + $slide_percent_between_images;
+  }
+}

data/stylesheets/css3slideshow/_slideshow.scss

@@ -0,0 +1,35 @@
+@import "compass";
+@import "animation";
+
+// Number of images in slideshow.
+$slide_nr_of_images: 3 !default;
+// Width of one image.
+$slide_img_width: 680px !default;
+// Height of one image.
+$slide_img_height: 320px !default;
+
+// Total time for slideshow.
+$slide_total_time: 10s !default;
+// Animation timing function.
+// TODO Test ease, linear, ease-in, ease-out and ease-in-out.
+$slide_timing_function: linear !default;
+
+// Id or class of slideshow.
+$slide_slideshow: "#content-slider" !default;
+// Id or class of slider.
+$slide_slider: "#slider" !default;
+// Id or class of mask.
+$slide_mask: "#mask" !default;
+// Id or class of progress bar.
+$slide_progress_bar: ".progress-bar" !default;
+// Color of progress bar.
+$slide_progress_bar_color: #fff !default;
+
+// Percent between images.
+$slide_percent_between_images: 4%;
+// Remaining percent divided by number of images.
+$slide_show_image_percent: (100% - ($slide_percent_between_images * $slide_nr_of_images)) / $slide_nr_of_images;
+
+@import "slideshow_layout";
+@import "images_animation";
+@import "progress_bar";

data/stylesheets/css3slideshow/_slideshow_layout.scss

@@ -0,0 +1,35 @@
+#{$slide_slideshow} /* #content-slider */ {
+  width: 100%;
+  height: $slide_img_height;
+}
+
+#{$slide_slider} /* #slider */ {
+  border: 5px solid #eaeaea;
+  height: $slide_img_height;
+  width: $slide_img_width;
+  overflow: hidden;
+  position: relative;
+}
+
+#{$slide_mask} /* #mask */ {
+  // Total width of all images.
+  width: $slide_img_width * $slide_nr_of_images;
+  position: relative;
+
+  ul {
+    float: left;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+    position: relative;
+
+    .tooltip {
+      position: absolute;
+      top: 0px;
+      left: 10px;
+    }
+  }
+}

metadata

@@ -0,0 +1,99 @@
+--- !ruby/object:Gem::Specification
+name: css3slideshow
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+  prerelease: 
+platform: ruby
+authors:
+- Christian Nilsson
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-11-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.2
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: animation
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.1.alpha.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.1.alpha.3
+description: CSS3 slideshow plugin for compass, no javascript.
+email: christian@klamby.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/css3slideshow.rb
+- stylesheets/_css3slideshow.scss
+- stylesheets/css3slideshow/_images_animation.scss
+- stylesheets/css3slideshow/_progress_bar.scss
+- stylesheets/css3slideshow/_slideshow.scss
+- stylesheets/css3slideshow/_slideshow_layout.scss
+homepage: https://github.com/klambycom/css3-slideshow
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: css3 slideshow plugin for compass
+test_files: []