thumbnail_hover_effect 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.idea/.name +1 -0
- data/.idea/.rakeTasks +7 -0
- data/CHANGEDLOG.md +3 -0
- data/README.md +176 -9
- data/lib/generators/templates/effects.css.sass.erb +421 -0
- data/lib/generators/templates/fonts/fontello.css +2100 -0
- data/lib/generators/templates/fonts/fontello.eot +0 -0
- data/lib/generators/templates/fonts/fontello.svg +2059 -0
- data/lib/generators/templates/fonts/fontello.ttf +0 -0
- data/lib/generators/templates/fonts/fontello.woff +0 -0
- data/lib/generators/templates/thumbnail.rb +38 -0
- data/lib/generators/thumbnail_generator.rb +70 -0
- data/lib/thumbnail_hover_effect/engine.rb +11 -0
- data/lib/thumbnail_hover_effect/image.rb +72 -0
- data/lib/thumbnail_hover_effect/version.rb +1 -1
- data/lib/thumbnail_hover_effect.rb +3 -1
- data/thumbnail_hover_effect.gemspec +8 -7
- data/vendor/assets/images/no-image-found.jpg +0 -0
- metadata +20 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1cc0a9d7352ce82eb3c04ff2bead90ddfb12f323
|
|
4
|
+
data.tar.gz: 7a99a989888de72c7e3449be30c583e5638402b4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 74f320e9bf251af93d888f163428f2ef09a896515de9cabc282ba9419a0ba30b4be4196b8579b3256711a7437ffae5d6683dc18ba05f50339887220976604139
|
|
7
|
+
data.tar.gz: 1375257656415b3eb13399f505d695cfb5617ccbeca69f89ce638bc6fa85f5d52bfb8d9d1bada91cf2d9acf13344d9980bfa7e10307de12916ae64ce1b479301
|
data/.idea/.name
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
thumbnail_hover_effect
|
data/.idea/.rakeTasks
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<Settings><!--This file was automatically generated by Ruby plugin.
|
|
3
|
+
You are allowed to:
|
|
4
|
+
1. Remove rake task
|
|
5
|
+
2. Add existing rake tasks
|
|
6
|
+
To add existing rake tasks automatically delete this file and reload the project.
|
|
7
|
+
--><RakeGroup description="" fullCmd="" taksId="rake"><RakeTask description="Build thumbnail_hover_effect-0.0.1.gem into the pkg directory" fullCmd="build" taksId="build" /><RakeTask description="Build and install thumbnail_hover_effect-0.0.1.gem into system gems" fullCmd="install" taksId="install" /><RakeTask description="Create tag v0.0.1 and build and push thumbnail_hover_effect-0.0.1.gem to Rubygems" fullCmd="release" taksId="release" /></RakeGroup></Settings>
|
data/CHANGEDLOG.md
ADDED
data/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# ThumbnailHoverEffect
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Introduces simple image thumbnail 3D image hover effects using CSS 3D transforms.
|
|
4
|
+
The idea is inspired by [this creat codedrops article] (http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/).
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -10,7 +12,7 @@ Add this line to your application's Gemfile:
|
|
|
10
12
|
|
|
11
13
|
And then execute:
|
|
12
14
|
|
|
13
|
-
$ bundle
|
|
15
|
+
$ bundle install
|
|
14
16
|
|
|
15
17
|
Or install it yourself as:
|
|
16
18
|
|
|
@@ -18,12 +20,177 @@ Or install it yourself as:
|
|
|
18
20
|
|
|
19
21
|
## Usage
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
### Basic Usage
|
|
24
|
+
|
|
25
|
+
In order to implement the thumbnail 3D image hover effects in your rails application follow the steps below:
|
|
26
|
+
|
|
27
|
+
__Creating thumbnail files__
|
|
28
|
+
|
|
29
|
+
Executing the following line in your rails application folder:
|
|
30
|
+
|
|
31
|
+
rails generate thumbnail class_name
|
|
32
|
+
|
|
33
|
+
is generating the files below:
|
|
34
|
+
|
|
35
|
+
* app/thumnbnails/class_name.rb
|
|
36
|
+
* vendor/assets/stylesheets/thumbnails/class_name/class_name.css.sass
|
|
37
|
+
* vendor/assets/stylesheets/thumbnails/fontello.css
|
|
38
|
+
* vendor/assets/fonts/thumbnails/fontello.eot
|
|
39
|
+
* vendor/assets/fonts/thumbnails/fontello.svg
|
|
40
|
+
* vendor/assets/fonts/thumbnails/fontello.ttf
|
|
41
|
+
* vendor/assets/fonts/thumbnails/fontello.woff
|
|
42
|
+
|
|
43
|
+
__Loading thumbnail css and fonts__
|
|
44
|
+
|
|
45
|
+
Add the following lines in your *application.css* file:
|
|
46
|
+
|
|
47
|
+
*= require thumbnails/fontello.css
|
|
48
|
+
*= require thumbnails/class_name/class_name.css.sass
|
|
49
|
+
|
|
50
|
+
__Rendering images with thumbnail hover effect__
|
|
51
|
+
|
|
52
|
+
Create a instance from the generated thumbnail class and call its *render* function like this:
|
|
53
|
+
|
|
54
|
+
ClassName.new(
|
|
55
|
+
{
|
|
56
|
+
url:image.image_url,
|
|
57
|
+
attributes:{likes:'12', dislikes: '2'}
|
|
58
|
+
}
|
|
59
|
+
).render
|
|
60
|
+
|
|
61
|
+
Note:
|
|
62
|
+
|
|
63
|
+
1. The *url* parameter is mandatory and it is valid web url to image
|
|
64
|
+
|
|
65
|
+
2. The *attributes* hash values are replaced in the HTML template
|
|
66
|
+
|
|
67
|
+
### Custom Usage
|
|
68
|
+
|
|
69
|
+
####Using the right settings#####
|
|
70
|
+
|
|
71
|
+
The gem generator is creating 3D hover effects using CSS 3D transforms. Because of this, you are not able to use the generated *CSS* files
|
|
72
|
+
for images with different width and height.
|
|
73
|
+
|
|
74
|
+
The generator uses default width and height if they are not supplied, but in most cases you will need to specify them:
|
|
75
|
+
|
|
76
|
+
rails generate thumbnail class_name -w 400 -h 500
|
|
77
|
+
or
|
|
78
|
+
|
|
79
|
+
rails generate thumbnail class_name --width=400 --height=500
|
|
80
|
+
|
|
81
|
+
**Note**: If you need to use the effect for images with various width and height you need to generated separated *CSS* files.
|
|
82
|
+
|
|
83
|
+
####Thumbnail Effects#####
|
|
84
|
+
|
|
85
|
+
There are four built-in thumbnail effects. By default, the generator is generating *CSS* for all of them.
|
|
86
|
+
|
|
87
|
+
1. How to generate *CSS* for specific thumbnail effect only?
|
|
88
|
+
|
|
89
|
+
In order to reduce the generated *CSS* rules you can render one or more specific effects like follows:
|
|
90
|
+
|
|
91
|
+
rails generate thumbnail class_name -w 400 -h 500 -e 1,2 #renders css for first and second effects
|
|
92
|
+
rails generate thumbnail class_name -w 400 -h 500 -e 3 #renders css for third effect only
|
|
93
|
+
|
|
94
|
+
**Note**: The possible options for the *effects* are *1*,*2*,*3* and *4*.
|
|
95
|
+
|
|
96
|
+
2. How to choose which effect to be used?
|
|
97
|
+
|
|
98
|
+
By default the render function is using the smallest effect. For example, if you have *CSS* rules for the third and the forth effect,
|
|
99
|
+
the following code is using the third:
|
|
100
|
+
|
|
101
|
+
ClassName.new(
|
|
102
|
+
{
|
|
103
|
+
url:image.image_url,
|
|
104
|
+
attributes:{download_url:'download_url'}
|
|
105
|
+
}
|
|
106
|
+
).render
|
|
107
|
+
|
|
108
|
+
If you need to specify an effect you can pass it as *render* function parameter:
|
|
109
|
+
|
|
110
|
+
ClassName.new(
|
|
111
|
+
{
|
|
112
|
+
url:image.image_url,
|
|
113
|
+
attributes:{download_url:'download_url'}
|
|
114
|
+
}
|
|
115
|
+
).render({effect_number:4})
|
|
116
|
+
|
|
117
|
+
####Thumbnail Template#####
|
|
118
|
+
|
|
119
|
+
Creating a thumbnail *HTML* template is the key part of the thumbnail image 3D hover effect. Basically, this is the *HTML*,
|
|
120
|
+
which is shown on image hover and it can be customized to meet the developer needs.
|
|
121
|
+
|
|
122
|
+
1. How to create *HTML* thumbnail template?
|
|
123
|
+
|
|
124
|
+
The template is extracted from your ruby *class_name*. In order to changed it you need to edit the *get_template*
|
|
125
|
+
function in tour *thumbnails/class_name.rb* file. It looks like this:
|
|
126
|
+
|
|
127
|
+
# returns the html template
|
|
128
|
+
def get_template(effect_number)
|
|
129
|
+
"
|
|
130
|
+
<div class=\"view-class_name effect0#{effect_number ||= 3}\">
|
|
131
|
+
<div>
|
|
132
|
+
#ADD YOUR HTML HERE
|
|
133
|
+
</div>
|
|
134
|
+
<div class=\"slice\" style=\"background-image: url(##url##);\">
|
|
135
|
+
..
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
"
|
|
139
|
+
end
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
2. How to pass arguments to thumbnail template?
|
|
143
|
+
|
|
144
|
+
You are passing dynamics values to your template using the class's constructor *attributes* hash. For example:
|
|
145
|
+
|
|
146
|
+
ClassName.new(
|
|
147
|
+
{
|
|
148
|
+
url:image.image_url,
|
|
149
|
+
attributes:{likes:'12', dislikes: '2'}
|
|
150
|
+
}
|
|
151
|
+
).render
|
|
152
|
+
|
|
153
|
+
is replacing the *##likes##* and *##dislikes##* placeholders in your *HTML* template.
|
|
154
|
+
|
|
155
|
+
**Note**: Do not use the *##url##* placeholder as it is internal.
|
|
156
|
+
|
|
157
|
+
3. Is there a default template?
|
|
158
|
+
|
|
159
|
+
There is a dummy default template.
|
|
160
|
+
|
|
161
|
+
4. Are there any *HTML* templates example?
|
|
162
|
+
|
|
163
|
+
I am going to provided a link to templates that I am using soon.
|
|
164
|
+
|
|
165
|
+
5. How to make a good *HTML* thumbnail template?
|
|
166
|
+
|
|
167
|
+
It depends on your images width and height. If your image is bigger you can embedded some text as well.
|
|
168
|
+
I prefer using font icons with links.
|
|
169
|
+
|
|
170
|
+
####Thumbnail Template#####
|
|
171
|
+
|
|
172
|
+
The gem is coming with the nice [fontello font icons](http://fontello.com/). You can use them in order to
|
|
173
|
+
create simple and good looking thumbnail *HTML* templates.
|
|
174
|
+
|
|
175
|
+
1. How to disable *fontello* font icons generation?
|
|
176
|
+
|
|
177
|
+
The *fontello* font icons files generation can be disabled as it is shown below:
|
|
178
|
+
|
|
179
|
+
rails generate thumbnail class_name -i false
|
|
180
|
+
or
|
|
181
|
+
|
|
182
|
+
rails generate thumbnail class_name --skips-icons
|
|
183
|
+
|
|
184
|
+
2. How to use *fontello* font icons?
|
|
185
|
+
|
|
186
|
+
Just used the appropriate class in your *HTML* template.
|
|
187
|
+
|
|
188
|
+
3. Where to see the available font icons?
|
|
189
|
+
|
|
190
|
+
Check the [official web site](http://fontello.com/)
|
|
191
|
+
|
|
192
|
+
4. Additional settings
|
|
22
193
|
|
|
23
|
-
|
|
194
|
+
Check the generated *vendor/assets/stylesheets/thumbnails/fontello.css* file for more settings like
|
|
195
|
+
3D effects and making icons bigger or smaller.
|
|
24
196
|
|
|
25
|
-
1. Fork it
|
|
26
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
27
|
-
3. Commit your changes (`git commit -am 'Add some feature'`)
|
|
28
|
-
4. Push to the branch (`git push origin my-new-feature`)
|
|
29
|
-
5. Create new Pull Request
|
|
@@ -0,0 +1,421 @@
|
|
|
1
|
+
$slider_name: <%= get_file_name %>
|
|
2
|
+
$slider_width: <%= get_width %>
|
|
3
|
+
$slider_height: <%= get_height %>
|
|
4
|
+
$slice_width: $slider_width/5
|
|
5
|
+
$slice_width_fixed: $slice_width - 1
|
|
6
|
+
|
|
7
|
+
.view-#{$slider_name}
|
|
8
|
+
width: #{$slider_width}px
|
|
9
|
+
height: #{$slider_height}px
|
|
10
|
+
margin: 10px
|
|
11
|
+
float: left
|
|
12
|
+
position: relative
|
|
13
|
+
border: 8px solid #fff
|
|
14
|
+
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
|
|
15
|
+
background: #333
|
|
16
|
+
-webkit-perspective: 500px
|
|
17
|
+
-moz-perspective: 500px
|
|
18
|
+
-o-perspective: 500px
|
|
19
|
+
-ms-perspective: 500px
|
|
20
|
+
perspective: 500px
|
|
21
|
+
|
|
22
|
+
.slice
|
|
23
|
+
width: #{$slice_width}px
|
|
24
|
+
height: 100%
|
|
25
|
+
z-index: 100
|
|
26
|
+
-webkit-transform-style: preserve-3d
|
|
27
|
+
-moz-transform-style: preserve-3d
|
|
28
|
+
-o-transform-style: preserve-3d
|
|
29
|
+
-ms-transform-style: preserve-3d
|
|
30
|
+
transform-style: preserve-3d
|
|
31
|
+
-webkit-transform-origin: left center
|
|
32
|
+
-moz-transform-origin: left center
|
|
33
|
+
-o-transform-origin: left center
|
|
34
|
+
-ms-transform-origin: left center
|
|
35
|
+
transform-origin: left center
|
|
36
|
+
-webkit-transition: -webkit-transform 150ms ease-in-out
|
|
37
|
+
-moz-transition: -moz-transform 150ms ease-in-out
|
|
38
|
+
-o-transition: -o-transform 150ms ease-in-out
|
|
39
|
+
-ms-transition: -ms-transform 150ms ease-in-out
|
|
40
|
+
transition: transform 150ms ease-in-out
|
|
41
|
+
|
|
42
|
+
.overlay
|
|
43
|
+
width: #{$slice_width}px
|
|
44
|
+
height: 100%
|
|
45
|
+
opacity: 0
|
|
46
|
+
position: absolute
|
|
47
|
+
-webkit-transition: opacity 150ms ease-in-out
|
|
48
|
+
-moz-transition: opacity 150ms ease-in-out
|
|
49
|
+
-o-transition: opacity 150ms ease-in-out
|
|
50
|
+
-ms-transition: opacity 150ms ease-in-out
|
|
51
|
+
transition: opacity 150ms ease-in-out
|
|
52
|
+
|
|
53
|
+
img
|
|
54
|
+
position: absolute
|
|
55
|
+
z-index: 0
|
|
56
|
+
-webkit-transition: left 0.3s ease-in-out
|
|
57
|
+
-o-transition: left 0.3s ease-in-out
|
|
58
|
+
-moz-transition: left 0.3s ease-in-out
|
|
59
|
+
-ms-transition: left 0.3s ease-in-out
|
|
60
|
+
transition: left 0.3s ease-in-out
|
|
61
|
+
|
|
62
|
+
//information box
|
|
63
|
+
div:first-child
|
|
64
|
+
width: 50%
|
|
65
|
+
height: 100%
|
|
66
|
+
position: absolute
|
|
67
|
+
right: 0
|
|
68
|
+
background: #666
|
|
69
|
+
z-index: 0
|
|
70
|
+
|
|
71
|
+
//first slice
|
|
72
|
+
> div:nth-child(2)
|
|
73
|
+
background-position: 0px 0px
|
|
74
|
+
background-color: green !important
|
|
75
|
+
div
|
|
76
|
+
-webkit-transform: translate3d(#{$slice_width}px,0,0)
|
|
77
|
+
-moz-transform: translate3d(#{$slice_width}px,0,0)
|
|
78
|
+
-o-transform: translate3d(#{$slice_width}px,0,0)
|
|
79
|
+
-ms-transform: translate3d(#{$slice_width}px,0,0)
|
|
80
|
+
transform: translate3d(#{$slice_width}px,0,0)
|
|
81
|
+
//second slice
|
|
82
|
+
> div
|
|
83
|
+
background-position: -#{$slice_width}px 0px
|
|
84
|
+
//third slice
|
|
85
|
+
> div
|
|
86
|
+
background-position: -#{$slice_width*2}px 0px
|
|
87
|
+
//forth slice
|
|
88
|
+
> div
|
|
89
|
+
background-position: -#{$slice_width*3}px 0px
|
|
90
|
+
//fifth slice
|
|
91
|
+
> div
|
|
92
|
+
background-position: -#{$slice_width*4}px 0px
|
|
93
|
+
|
|
94
|
+
<% if should_be_effect_rendered(1) %>
|
|
95
|
+
&.effect01
|
|
96
|
+
//first slice
|
|
97
|
+
> div:nth-child(2)
|
|
98
|
+
> .overlay
|
|
99
|
+
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%)
|
|
100
|
+
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%)
|
|
101
|
+
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%)
|
|
102
|
+
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%)
|
|
103
|
+
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%)
|
|
104
|
+
//second slice
|
|
105
|
+
> div
|
|
106
|
+
background-position: -#{$slice_width}px 0px
|
|
107
|
+
> .overlay
|
|
108
|
+
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
109
|
+
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
110
|
+
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
111
|
+
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
112
|
+
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
113
|
+
//third slice
|
|
114
|
+
> div
|
|
115
|
+
background-position: -#{$slice_width*2}px 0px
|
|
116
|
+
> .overlay
|
|
117
|
+
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%)
|
|
118
|
+
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%)
|
|
119
|
+
background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%)
|
|
120
|
+
background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%)
|
|
121
|
+
background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%)
|
|
122
|
+
//forth slice
|
|
123
|
+
> div
|
|
124
|
+
background-position: -#{$slice_width*3}px 0px
|
|
125
|
+
> .overlay
|
|
126
|
+
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)
|
|
127
|
+
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%)
|
|
128
|
+
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%)
|
|
129
|
+
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%)
|
|
130
|
+
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%)
|
|
131
|
+
//fifth slice
|
|
132
|
+
> div
|
|
133
|
+
background-position: -#{$slice_width*4}px 0px
|
|
134
|
+
> .overlay
|
|
135
|
+
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%)
|
|
136
|
+
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%)
|
|
137
|
+
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%)
|
|
138
|
+
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%)
|
|
139
|
+
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%)
|
|
140
|
+
//animations settings
|
|
141
|
+
&:hover
|
|
142
|
+
.overlay
|
|
143
|
+
opacity: 1
|
|
144
|
+
//first slice
|
|
145
|
+
> div:nth-child(2)
|
|
146
|
+
//second slice
|
|
147
|
+
> div
|
|
148
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-45deg)
|
|
149
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-45deg)
|
|
150
|
+
-o-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-45deg)
|
|
151
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-45deg)
|
|
152
|
+
transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-45deg)
|
|
153
|
+
//third slice
|
|
154
|
+
> div
|
|
155
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
156
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
157
|
+
-o-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
158
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
159
|
+
transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
160
|
+
//forth slice
|
|
161
|
+
> div
|
|
162
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-90deg)
|
|
163
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-90deg)
|
|
164
|
+
-o-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-90deg)
|
|
165
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-90deg)
|
|
166
|
+
transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,-90deg)
|
|
167
|
+
//fifth slice
|
|
168
|
+
> div
|
|
169
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
170
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
171
|
+
-o-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
172
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
173
|
+
transform: translate3d(#{$slice_width_fixed}px,0,0) rotate3d(0,1,0,90deg)
|
|
174
|
+
<% end %>
|
|
175
|
+
|
|
176
|
+
<% if should_be_effect_rendered(2) %>
|
|
177
|
+
&.effect02
|
|
178
|
+
-webkit-perspective: 800px
|
|
179
|
+
-moz-perspective: 800px
|
|
180
|
+
-o-perspective: 800px
|
|
181
|
+
-ms-perspective: 800px
|
|
182
|
+
perspective: 800px
|
|
183
|
+
//information box
|
|
184
|
+
div:first-child
|
|
185
|
+
background: #0a0a0a
|
|
186
|
+
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
187
|
+
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0a0a0a), color-stop(100%, #666666))
|
|
188
|
+
background: -webkit-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
189
|
+
background: -o-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
190
|
+
background: -ms-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
191
|
+
background: linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
192
|
+
//first slice
|
|
193
|
+
> div:nth-child(2)
|
|
194
|
+
//second slice
|
|
195
|
+
> div
|
|
196
|
+
//third slice
|
|
197
|
+
> div
|
|
198
|
+
//forth slice
|
|
199
|
+
> div
|
|
200
|
+
> .overlay
|
|
201
|
+
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
202
|
+
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
203
|
+
background: -o-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
204
|
+
background: -ms-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
205
|
+
background: linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
206
|
+
//fifth slice
|
|
207
|
+
> div
|
|
208
|
+
> .overlay
|
|
209
|
+
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
210
|
+
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
211
|
+
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
212
|
+
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
213
|
+
background: linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 100%)
|
|
214
|
+
&:hover
|
|
215
|
+
//first slice
|
|
216
|
+
> div:nth-child(2)
|
|
217
|
+
-webkit-transition-delay: 200ms
|
|
218
|
+
-moz-transition-delay: 200ms
|
|
219
|
+
-o-transition-delay: 200ms
|
|
220
|
+
-ms-transition-delay: 200ms
|
|
221
|
+
transition-delay: 200ms
|
|
222
|
+
-webkit-transform: rotate3d(0, 1, 0, -3deg)
|
|
223
|
+
-moz-transform: rotate3d(0, 1, 0, -3deg)
|
|
224
|
+
-o-transform: rotate3d(0, 1, 0, -3deg)
|
|
225
|
+
-ms-transform: rotate3d(0, 1, 0, -3deg)
|
|
226
|
+
transform: rotate3d(0, 1, 0, -3deg)
|
|
227
|
+
//second slice
|
|
228
|
+
> div
|
|
229
|
+
-webkit-transition-delay: 150ms
|
|
230
|
+
-moz-transition-delay: 150ms
|
|
231
|
+
-o-transition-delay: 150ms
|
|
232
|
+
-ms-transition-delay: 150ms
|
|
233
|
+
transition-delay: 150ms
|
|
234
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -10deg)
|
|
235
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -10deg)
|
|
236
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -10deg)
|
|
237
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -10deg)
|
|
238
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -10deg)
|
|
239
|
+
//third slice
|
|
240
|
+
> div
|
|
241
|
+
-webkit-transition-delay: 100ms
|
|
242
|
+
-moz-transition-delay: 100ms
|
|
243
|
+
-o-transition-delay: 100ms
|
|
244
|
+
-ms-transition-delay: 100ms
|
|
245
|
+
transition-delay: 100ms
|
|
246
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -16deg)
|
|
247
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -16deg)
|
|
248
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -16deg)
|
|
249
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -16deg)
|
|
250
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -16deg)
|
|
251
|
+
//forth slice
|
|
252
|
+
> div
|
|
253
|
+
-webkit-transition-delay: 50ms
|
|
254
|
+
-moz-transition-delay: 50ms
|
|
255
|
+
-o-transition-delay: 50ms
|
|
256
|
+
-ms-transition-delay: 50ms
|
|
257
|
+
transition-delay: 50ms
|
|
258
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -30deg)
|
|
259
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -30deg)
|
|
260
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -30deg)
|
|
261
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -30deg)
|
|
262
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -30deg)
|
|
263
|
+
//fifth slice
|
|
264
|
+
> div
|
|
265
|
+
-webkit-transform: translate3d(#{$slice_width}px, 0, 0) rotate3d(0, 1, 0, -42deg)
|
|
266
|
+
-moz-transform: translate3d(#{$slice_width}px, 0, 0) rotate3d(0, 1, 0, -42deg)
|
|
267
|
+
-o-transform: translate3d(#{$slice_width}px, 0, 0) rotate3d(0, 1, 0, -42deg)
|
|
268
|
+
-ms-transform: translate3d(#{$slice_width}px, 0, 0) rotate3d(0, 1, 0, -42deg)
|
|
269
|
+
transform: translate3d(#{$slice_width}px, 0, 0) rotate3d(0, 1, 0, -42deg)
|
|
270
|
+
<% end %>
|
|
271
|
+
|
|
272
|
+
<% if should_be_effect_rendered(3) %>
|
|
273
|
+
&.effect03
|
|
274
|
+
-webkit-perspective: 1000px
|
|
275
|
+
-moz-perspective: 1000px
|
|
276
|
+
-o-perspective: 1000px
|
|
277
|
+
-ms-perspective: 1000px
|
|
278
|
+
perspective: 1000px
|
|
279
|
+
//first slice
|
|
280
|
+
> div:nth-child(2)
|
|
281
|
+
> .overlay
|
|
282
|
+
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)
|
|
283
|
+
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)
|
|
284
|
+
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)
|
|
285
|
+
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)
|
|
286
|
+
background: linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)
|
|
287
|
+
//second slice
|
|
288
|
+
> div
|
|
289
|
+
//third slice
|
|
290
|
+
> div
|
|
291
|
+
//forth slice
|
|
292
|
+
> div
|
|
293
|
+
//fifth slice
|
|
294
|
+
> div
|
|
295
|
+
> .overlay
|
|
296
|
+
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
|
|
297
|
+
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
|
|
298
|
+
background: -o-linear-gradient(right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
|
|
299
|
+
background: -ms-linear-gradient(right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
|
|
300
|
+
background: linear-gradient(right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)
|
|
301
|
+
&:hover
|
|
302
|
+
//first slice
|
|
303
|
+
> div:nth-child(2)
|
|
304
|
+
-webkit-transform: rotate3d(0, 1, 0, -55deg)
|
|
305
|
+
-moz-transform: rotate3d(0, 1, 0, -55deg)
|
|
306
|
+
-o-transform: rotate3d(0, 1, 0, -55deg)
|
|
307
|
+
-ms-transform: rotate3d(0, 1, 0, -55deg)
|
|
308
|
+
transform: rotate3d(0, 1, 0, -55deg)
|
|
309
|
+
//second slice
|
|
310
|
+
> div
|
|
311
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
312
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
313
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
314
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
315
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
316
|
+
//third slice
|
|
317
|
+
> div
|
|
318
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 30deg)
|
|
319
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 30deg)
|
|
320
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 30deg)
|
|
321
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 30deg)
|
|
322
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 30deg)
|
|
323
|
+
//forth slice
|
|
324
|
+
> div
|
|
325
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 40deg)
|
|
326
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 40deg)
|
|
327
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 40deg)
|
|
328
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 40deg)
|
|
329
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 40deg)
|
|
330
|
+
//fifth slice
|
|
331
|
+
> div
|
|
332
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
333
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
334
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
335
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
336
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 20deg)
|
|
337
|
+
<% end %>
|
|
338
|
+
|
|
339
|
+
<% if should_be_effect_rendered(4) %>
|
|
340
|
+
&.effect04
|
|
341
|
+
-webkit-perspective: 1050px
|
|
342
|
+
-moz-perspective: 1050px
|
|
343
|
+
-o-perspective: 1050px
|
|
344
|
+
-ms-perspective: 1050px
|
|
345
|
+
perspective: 1050px
|
|
346
|
+
//information box
|
|
347
|
+
div:first-child
|
|
348
|
+
background: #0a0a0a
|
|
349
|
+
background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
350
|
+
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0a0a0a), color-stop(100%, #666666))
|
|
351
|
+
background: -webkit-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
352
|
+
background: -o-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
353
|
+
background: -ms-linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
354
|
+
background: linear-gradient(left, #0a0a0a 0%, #666666 100%)
|
|
355
|
+
div
|
|
356
|
+
-webkit-transition: all 150ms ease-in-out
|
|
357
|
+
-moz-transition: all 0.3s ease-in-out
|
|
358
|
+
-o-transition: all 0.3s ease-in-out
|
|
359
|
+
-ms-transition: all 0.3s ease-in-out
|
|
360
|
+
transition: all 0.3s ease-in-out
|
|
361
|
+
//first slice
|
|
362
|
+
> div:nth-child(2)
|
|
363
|
+
//second slice
|
|
364
|
+
> div
|
|
365
|
+
> .overlay
|
|
366
|
+
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)
|
|
367
|
+
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)
|
|
368
|
+
background: -o-linear-gradient(right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)
|
|
369
|
+
background: -ms-linear-gradient(right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)
|
|
370
|
+
background: linear-gradient(right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%)
|
|
371
|
+
//third slice
|
|
372
|
+
> div
|
|
373
|
+
> .overlay
|
|
374
|
+
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
375
|
+
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
376
|
+
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
377
|
+
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
378
|
+
background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
|
|
379
|
+
//forth slice
|
|
380
|
+
> div
|
|
381
|
+
> .overlay
|
|
382
|
+
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%)
|
|
383
|
+
background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%)
|
|
384
|
+
background: -o-linear-gradient(right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%)
|
|
385
|
+
background: -ms-linear-gradient(right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%)
|
|
386
|
+
background: linear-gradient(right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%)
|
|
387
|
+
//fifth slice
|
|
388
|
+
> div
|
|
389
|
+
> .overlay
|
|
390
|
+
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
|
|
391
|
+
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
|
|
392
|
+
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
|
|
393
|
+
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
|
|
394
|
+
background: linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
|
|
395
|
+
&:hover
|
|
396
|
+
//first slice
|
|
397
|
+
> div:nth-child(2)
|
|
398
|
+
//second slice
|
|
399
|
+
> div
|
|
400
|
+
//third slice
|
|
401
|
+
> div
|
|
402
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -55deg)
|
|
403
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -55deg)
|
|
404
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -55deg)
|
|
405
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -55deg)
|
|
406
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -55deg)
|
|
407
|
+
//forth slice
|
|
408
|
+
> div
|
|
409
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 110deg)
|
|
410
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 110deg)
|
|
411
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 110deg)
|
|
412
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 110deg)
|
|
413
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, 110deg)
|
|
414
|
+
//fifth slice
|
|
415
|
+
> div
|
|
416
|
+
-webkit-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -110deg)
|
|
417
|
+
-moz-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -110deg)
|
|
418
|
+
-o-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -110deg)
|
|
419
|
+
-ms-transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -110deg)
|
|
420
|
+
transform: translate3d(#{$slice_width_fixed}px, 0, 0) rotate3d(0, 1, 0, -110deg)
|
|
421
|
+
<% end %>
|