Parallax


[display-posts category=”animation” category_display=”true” category_display=”post_tag” category_display=”taxonomy_name” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” image_size=”display-posts-nav-img” pagination=”true” pagination=”33″]

display posts category slug for wordpress

[display-posts category=”wordpress”]

display posts no paramaters
[display-posts]

display posts with category
[display-posts category=”animation, animation-overview, animation-morecheats” category_display=”true” category_display=”post_tag” category_display=”taxonomy_name” image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id”]


https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall.html

https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons.html


https://spectre.nakedsword.com/_html/parallax/arrowbanner_add_to_spectre.html

Finishing up a better one right now V2 – it’s the test pages you want –

http://projects.nakedsword.com/motion-stuff/
pass: iloveporn

Quick Explanation

https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall.html

https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons.html

Shows how I am using font size to affect the floating pieces in the animated windows –
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall_withcontrols.html

TEST PAGES::

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1_first.html
make browser smaller / larger / the ns logo does not scale – animated images don’t respond like regular images – they have to be made proportional to everything else they are working with –

“With a bit of planning, animations can work just as well at small sizes as they do at large sizes. Don’t use pixel units, and make sure every width, height, and distance value are defined based on one or two variables based on the container/viewport dimensions or by font size.”

so basically the way the site is working now had to be rethought if we were going to use these at all FUNNNNNNN –

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1.html
– very simple – but still responsive – plays until clicked –

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1b.html
– tricked to think that window is larger than it is – makes animation appear in different position – appear to start later

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1c.html
– can have something layered above / below running arrow

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1d.html
– item fade in – initial arrow can wait then start sliding –

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1e.html
– item fade in – initial arrow can wait then start sliding – reversed background gradient behind –

https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1f.html
– fade in / wait / slightly stronger gradient / movement on arrow when it is clicked (forwarding directly to join – could wait until that animation finsishes)


[display-posts category=”wordpress”]
[display-posts]
Scroll to Top