CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
user2432772
user2432772

Reputation: 233

Bootstrap 3 image autosize full screen and scroll effect

Hi this is what I am trying to achieve http://michaelisboyd.com/ 1.Image is auto size to full width and height of user current resolution. 2. Scroll effect.

here is my code http://codepen.io/anon/pen/wCKoJ

My problem I am not understanding where to dig. not sure exactly how they are doing that... for one thing, they are somehow calling javascript files that don't appear directly in the source... probably through that require.js file... but that's the only .js that appears in the file and yet when the page load is finished there are 34 loaded scripts in the browser If you have a tutorial or know the steps how to do it I would really appreciate any info about it.

Upvotes: 0

Views: 1667

Answers (1)

Dranes
Dranes

Reputation: 82

For #1 i think you can take a look at this jquery library http://srobbin.com/jquery-plugins/backstretch/

For #2 the scroll effect is in this file http://michaelisboyd.com/wp-content/themes/mba/js/views/HeaderView.js but i think you'll need to dig deeper into the code specially in the imageHeadDoSnap function

Additionally you can check the demos of these libraries

http://markdalgleish.com/projects/stellar.js/ https://github.com/desandro/isotope (http://michaelisboyd.com/ grid system is based on this)

Upvotes: 1

Related Questions