Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to figure out how this website does this effect :
http://rosedalelivery.com/
Can this be done using css? I tried using multiple background images, but the scrolling effect just doesn't match up.
Thanks in advance.
The best way to checkout how a website achieves something in CSS or JS is to use Chrome's Inspector tool.
You can right-click on the site's page and inspect the site's resources (cmd + option + i on Mac) -- click the resource tab. Under the scripts it shows a stellar.js which is a popular jQuery plug-in for doing parallax scrolling that's done on the website you're referencing.
The Stellar.js website: http://markdalgleish.com/projects/stellar.js/
Stellar.js Github page: https://github.com/markdalgleish/stellar.js
It also looks like the site is using NiceScroll for mobile scrolling: http://areaaperta.com/nicescroll/
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
This is my first attempt at creating a responsive website.
So, I have stylesheets loading depending on the size of device, meaning that some divs may or may not be visible.
One problem that I've encountered is that on mobiles I don't want to show a panel that has content and advertising. The issue I have is that I am still building that panel and making the mobile visitors download it but not displaying it. It's still being loaded and I'm being credited for it, but can't be clicked/seen and I'll have my hand slapped.
So, how do I only load ads (let's say an iframe or javascript) if the div is to be visible? Or even better maybe only load a complete div/panel if it's visible?
Or am I going about this the wrong way?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
If someone can give me a hint about how to do the crazy text effect example on this site:
(main title on hover)
http://capitolcouture.pn/
You can easially debug the website too see all the code. Note that the effect is loaded in a iFrame so you should open the iFrame to look at the code.
The library that is used for this is the 3D javascript library three.js.
I'm not really familier with this library but i read you need some basic understanding of WebGL if you want to use this library.
You can probably find some great tutorials on the internet of three.js
Hopefully i give you a direction to look at. Note that this is not just a beginners thing to do :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like to create a header that contains graphics/images and when the user scrolls down to view the page content, the header starts off at the base and then becomes fixed at the top of the screen.
Here is an example: http://www.thinkful.com/learn/javascript-best-practices-1/
How would I create this?
I have used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/) with a lot of success.
By checking scrollTop(). You could easily have searched for this. How to build simple sticky navigation with jQuery?
Using jQuery:
With $(window).on('scroll',function(){ /*your code*/ }); you can
bind a function to the scroll event.
Inside that function use document.scrollTop to know the current
vertical position of the scroll bar
Change the css of the header and the side menu with .css() or .addClass()
Finally with the HTML5 History API you can change the URL
without loading the page using the history.replaceState() method.
I've just forked a plugin called Scrollit.js that does the job. The original version from Chris Polis works great but doesn't change the URL. My version does change the URL has't been completely tested.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I'd like to know some ways to animate icon on HOVER.. I'd like them to work like animated gifs...
Here is an example:
TRASK INDUSTRIES LEFT MENU
When you hover icons on the left menu they get an animation!
I google unsuccessfully for a solution...
Thanks.
The site you referenced is using sprite sheets for animation. Essentially a sprite sheet is just an image that contains frames for an entire animation. When displayed, you crop the image to match the dimensions of a single frame and adjust the position of the image to move to different frames.
Here are some jQuery plugins to help you get started.
Spritely
SpriteSpin
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a webpage, a simple index.php. With jquery I managed to set up 5 individual menus. Unfortunately I have to use like 150 thumbnail images in my gallery, and whenever I reload the page, all those pictures need to load in as well and it takes like 5-6 seconds. I tried to set up Lazy Load jquery addon, but it just didn't work for me (it is written for scrolling websites I guess..and mine is not like that).
I was thinking about writing a script, which prevents all those images loadin, but I don't even know how to start. My point is, thumbnail images should be loading only if the user clicks on the gallery link (which is the very same php page though).
Just put the images' url in a separate attribute like:
<img data-realsrc='realsrc'>
and then when you need to load them:
$(img).attr('src', $(img).data('realsrc'));
The above is the general implementation principle. For a real example look at the fiddle: http://jsfiddle.net/3UrUZ/
BTW doing what you did is not a good practice. I suggest you to use CSS Sprites istead of a lot of images. :) And there are a lot of sprites generators to help creating them.