I am trying to re-create an effect I made on my website. This effect consists of a repeating background that scrolls at a greater rate than the foreground. When I created this effect, I used a website builder and framework, but I am now in the process of trying to recreate everything on plain code, and I would like to know if this is possible.
Example Website: www.migte.net
(To see the example effect, scroll down a bit and you will see text saying "Experience Flawless Quality" and if you scroll down a bit more, the effect repeats with lines in the background of a video)
How would I go about having a different scroll speed for the background than the rest of the page? I had tried one solution using web-kit transformations, but it didn't seem to work. Is this possible at all without using some sort of external framework / builder?
All help would be greatly appreciated. Thanks!
Related
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
I am a web design student and I am working on my portfolio site. I have a resume page that has a non-traditional design or layout. The problem I am running into occurs when the page is resized. Certain elements are pushed down as the window gets smaller. I need to find a way to adjust their top margin as the resize occurs, but I have not been able to accomplish this with media queries alone. Please see the following codepen for an example of the issue I am running into.
http://codepen.io/anon/pen/Hkpny
As the browser goes below 1440px, the boxes hanging from the ropes start to push down. Is there a way to use javascript to recalculate the margin-top and apply it to the elements when the user reduces or increases the window resize? The ultimate goal is to have the ropes stay connected where the red dots have been placed because I am going to give the hanging boxes a subtle swing or sway animation.
Any help would be greatly appreciated.
Thanks
I don't get it, all I had to do is to is what you did but for margin-top. You may want to play a bit with the values because I've never used scss before in my life (I'd do it with a <canvas> and javascript to begin with), but it works. http://codepen.io/anon/pen/iJgqn
Btw if you plan to display it in landscape mode on mobile, you may want to cut the shields left and right or it may get scaled very small. Maybe put them under the big shield in that case and get as much zoom on the rest as possible.
For a portfolio site I would recommend reconsidering the whole design. Just from this snippet, it seems the design is not very accessible and has too many dependencies. The concept is pretty cool but while you want to showcase your skills and creativity, you also want to showcase your understanding for accessibility (responsiveness), usability and what is trending right now (clean, minimal and flat design). I'm not saying you should fall in line and design what everyone else is, but you need to attract clients which is the whole purpose of a portfolio.
I stumbled across this website and while it is too cluttered for my tastes, I love the depth effect that you see as you scroll. There appears to be a layer that is masked and scrolls at a much slower speed than the main layer. I was just curious if this special effect is something canned that can be slapped into a website or not. It would be interesting to try and reproduce it from scratch. I have a hard time distilling where in the code this effect is being carried out when I view the page source.
Its not a 'depth effect' There are multiple script at play here...
1) paralax scrolling (background images fixed behind the main page)
2) muliple jquery effects to bring content in from the side or fade in etc - triggered as you scroll
http://prinzhorn.github.io/skrollr/
boom, thanks Froient for bringing up the word parallax, I googled that and found what I needed! This is going to be amazing for my art portfolio!
I just saw this sweet Header Animation (http://anchorage-theme.pixelunion.net/) and was wondering how to implement an effect like this on a site. I am quite fluent in html and css and have dabbled with javascript, but never really got in at the deep end. Maybe this is the place to start.
But how would I go about this header?
That's not an animation, that's a technique called Parallax Scrolling.
The idea is to mimic the "Parallax" optical illusion used in 3D tvs to add the effect of depth to the page while it scrolls (i.e. "background" elements move slower than "foreground" elements).
It uses the scroll position of the page to dynamically set position, opacity, rotation, or other attributes of various elements to achieve this effect.
Here's a simple tutorial on it: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php