source: spip-zone/_squelettes_/parallelism4spip/README.txt @ 82658

Last change on this file since 82658 was 82658, checked in by suske@…, 7 years ago

Adaptation SPIP de http://html5up.net/parallelism - premier jet fonctionnel

  • Property svn:executable set to *
File size: 7.3 KB
Line 
1Parallelism 1.1 by HTML5 UP
2html5up.net | @n33co
3Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
4
5
6It's done! Parallelism was an idea I mocked up a few months ago but, due to other
7committments, didn't get around to putting to code until recently. Different to
8my more general-purpose freebies, this one's specifically built for portfolio use
9but still delivers quite a bit of customizability (via CSS and a number of settings).
10For more on how it works and how to make the most of it, jump on down to the
11"Instructions" section.
12
13Demo images* are courtesy of the supremely talented photographer Felicia Simion.
14If you like photography or just enjoy being blown away by awesome stuff, check
15out her portfolio for more stunning images:
16
17http://ineedchemicalx.deviantart.com/
18
19* Not included with this download (replaced with generic placeholders). Note that I only
20have permission to use her images in my on-site demos, so do NOT download and use any of
21Felicia's work without her explicit permission.
22
23As usual, feedback, bug reports, and comments are not only welcome, but strongly
24encouraged :)
25
26
27AJ
28n33.co @n33co dribbble.com/n33
29
30
31
32Instructions
33============
34       
35
36        Terminology
37        -----------
38       
39                - Item: A generic container of stuff. Said stuff can be a thumbnail, the actual
40                  page header, or whatever else you deem item worthy. Items can vary in width but
41                  are all the same height (230px by default, but you can change this with a setting).
42                 
43                - Thumb: A special type of item that contains a thumbnail image and a title. Short
44                  for thumbnail. No relation to actual nails.
45                 
46                - Reel: A whole bunch of items strung together, and the main point of interaction
47                  for users.
48       
49
50        How it Works
51        ------------
52       
53                1. You (the user) add a bunch of items to the reel. Items must be assigned a width
54                   (in pixels) using the "data-width" attribute. A few examples:
55
56                                Generic
57                                -------
58
59                                        <div class="item" data-width="300">
60                                                This is a generic item. Put whatever you want here.
61                                        </div>
62                                       
63                                        (width = whatever you want)
64                                       
65                                Thumbnail
66                                ---------
67                               
68                                        <article class="item thumb" data-width="275">
69                                                <h2>Image Title</h2>
70                                                <a href="path/to/fullsize.jpg"><img src="path/to/thumbnail.jpg" alt=""></a>
71                                        </article>
72                               
73                                        (width = width of the thumbnail image)
74                               
75                                Page Header (which, by the way, is entirely optional)
76                                -----------------------------------------------------
77
78                                        <div id="header" class="item" data-width="400">
79                                                <h1>Parallelism</h1>
80                                                <p>A responsive portfolio site<br />
81                                                template by HTML5 UP</p>
82                                        </div>
83                                       
84                                        (width = whatever you want)
85
86                   Congratulations. You now have a reel full of items.
87
88                2. Parallelism looks at the window, figures out how many rows it can fit in the
89                   available (vertical) space, then breaks up the reel into that many rows.
90                 
91                3. With the reel broken up, Parallelism goes through and does a bit of scaling
92                   on each item to ensure the widths of each row are identical.
93                   
94                4. Profit !@#!#%$(!$%(*
95
96                So yeah, pretty simple. Also, tons of settings to mess with if you're into that
97                sort of thing (below).
98
99
100        Notes
101        -----
102       
103                - Scrolling is handled in 3 ways:
104               
105                        1. Scrolling up/down using the mouse wheel (down = scroll right, up = scroll left)
106                        2. Using the left/right arrow keys ("Scroll Keys")
107                        3. Moving the mouse cursor to the far left or far right of the screen ("Scroll Zones")
108       
109                        Methods #2 and #3 can be disabled and customized using settings (below). Method #1
110                        is always enabled.
111       
112                - If you don't have enough items to require scrolling, the reel will just be centered on
113                  the screen.
114               
115                - Rows will automatically factor when the viewport is resized.
116
117                - All modern desktop/mobile browsers are supported (as well as IE as far back as 8, though
118                  7 is still pretty usable).
119       
120
121        Settings
122        --------
123
124                Put these at the top of js/config.js to override the defaults.
125
126                popupOverlayColor
127                        Popup overlay color (default: '#1a1f2c')
128               
129                popupOverlayOpacity
130                        Popup overlay opacity (default: 0.75)
131
132                autoStyleMobile
133                        If true, mobile mode will get some automatic styling (default: true)
134               
135                centerVertically
136                        If true, reel will be vertically centered (default: true)
137
138                introDelay
139                        Delay (in ms) before showing the reel (default: 600)
140                       
141                introSpeed
142                        Speed (in ms) at which to fade in reel (default: 750)
143                       
144                itemHeight
145                        Height (in px) of items (default: 230)
146               
147                itemWidth
148                        Default width (in px) of width (default: 300)
149                       
150                marginBottom   
151                        Margin (in px) to preserve at the bottom of the viewport (default: 40)
152                       
153                marginTop
154                        Margin (in px) to preserve at the top of the viewport (default: 0)
155                       
156                maxRows
157                        Maximum number of rows (default: 3)
158               
159                minRows
160                        Minimum number of rows (default: 1)
161               
162                padding
163                        Padding (in px) between items (0 = no padding) (default: 10)
164               
165                paddingColor
166                        Padding color (default: '#fff')
167               
168                resetScroll
169                        If true, reel scroll will reset on page refresh (default: true)
170               
171                scrollFactor
172                        Scales the scroll delta (1 = normal, 2 = double, 0.5 = half, etc.) (default: 1)
173               
174                useScrollKeys
175                        If true, the left/right arrow keys will scroll the reel (default: true)
176               
177                scrollKeyAmount
178                        Scroll amount when using keys (default: 50)
179
180                scrollWheelTarget
181                        Determines where scrollwheel events should be captured ('window' or 'reel') (default: 'window')
182               
183                useScrollZones
184                        If true, moving the cursor to the leftmost/rightmost edges of the reel will scroll it (default: true)
185               
186                scrollZoneAmount
187                        Scroll amount when using scroll zones (default: 10)
188               
189                scrollZoneDelay
190                        Time (in ms) to wait between scrolls when the cursor is in a scroll zone (default: 20)
191               
192                scrollZoneWidth
193                        Width of scroll zones (default: 40)
194               
195                thumbDelay
196                        Delay (in ms) before showing thumbnails (default: 1200)
197               
198                thumbDelaySpread
199                        Spread (in ms) to randomly stagger thumbnails (0 = don't stagger) (default: 1500)
200               
201                thumbSpeed
202                        Speed (in ms) at which to fade in thumbnails (default: 750)
203               
204                useBlurFilter
205                        If true, page will blur slightly when the popup is displayed (webkit only) (default: true)
206
207
208
209Credits
210=======
211
212
213        Images (Demo Only)
214                Felicia Simion (http://ineedchemicalx.deviantart.com/)
215                - Pasadena (http://ineedchemicalx.deviantart.com/art/Pasadena-357650036)
216                - Your really got me (http://ineedchemicalx.deviantart.com/art/You-really-got-me-345249340)
217                - Ad Infinitum (http://ineedchemicalx.deviantart.com/art/Ad-infinitum-354203162)
218                - Different. (http://ineedchemicalx.deviantart.com/art/Different-353708988)
219                - Elysium (http://ineedchemicalx.deviantart.com/art/Elysium-355393900)
220                - Kingdom of the Wind (http://ineedchemicalx.deviantart.com/art/Kingdom-of-the-Wind-348268044)
221                - The Pursuit (http://ineedchemicalx.deviantart.com/art/The-Pursuit-355003425)
222                - Boundless (http://ineedchemicalx.deviantart.com/art/Boundless-291831118)
223                - The Spectators (http://ineedchemicalx.deviantart.com/art/The-Spectators-342155982)
224               
225        Icons
226                Font Awesome (http://fortawesome.github.com/Font-Awesome/)
227
228        Other
229                jQuery (jquery.com)
230                html5shiv.js (@afarkas @jdalton @jon_neal @rem)
231                jquery.poptrox (n33.co)
232                skelJS (skeljs.org)
Note: See TracBrowser for help on using the repository browser.