My inspiration is http://www.diesel.com/bags-female. Can anyone explain how I can achieve this effect?
I have started with this code:
$(document).ready(function(){
$('#background-thing').mousemove(function(e){
var mousePos = (e.pageX/$(window).width())*100;
$('#background-thing').css('backgroundPosition', mousePos+'% 0');
//alert(mousePos);
});
});
But it only pans the background image. I wish to have multiple links over the background image which are anchors and clicking on those images will make a zoom effect on that particular coordinate.
Should I rather look at a jQuery plugin? If so, what are your recommendations?
I've used skrollr in the past for quick implementations and it's served me quite well.
Here are some links:
https://github.com/Prinzhorn/skrollr
http://prinzhorn.github.io/skrollr/
Hope that helps, good luck!
I don't think you want or need any Jquery plugin for what you're doing.
That page you provided for reference uses css 3d transforms and default Jquery.
Here's the reference for that on W3schools: http://www.w3schools.com/css/css3_3dtransforms.asp
Specifically something like:
//clearly broken code used just for example
$(document).ready(function(){
$('#yourpagecontainer').on("click","a",function(){
$(this).css("transform", "scale3d("+x+","+y+","+z+")");
}
}
The code you've provided doesn't make it clear what exactly you have to far, but maybe you'd benefit from taking a look at this example: http://sarasoueidan.com/blog/windows8-animations/
It's not identical, but it is in the span of what you'd like to do.
I don't think your example strictly fits the definition of "parallax" like this site. I'm pretty sure you could achieve something similar to your example with:
Changing the CSS3 background size and position on click (as explain in this question and here).
Applying a partially transparent .png with a fully transparent "window" in the center over the entire window on click to achieve that same blurred/focus look. You can apply different filters on the partially transparent areas to get something more artistic looking. Inkscape does this quite well and it is free ;)
This is not a cross browser solution, however. Everybody say "Internet Explorer" (8 and below). For 9 and above make sure you have <!DOCTYPE html /> otherwise your CSS3 becomes CSSFAIL.
Fun project, enjoy :)
Related
First of all, I know there are ALOT of parallax questions out there, but they all use a different effect to what I am aiming for.
I want to create a parallax scene like used here:
http://www.firewatchgame.com/
I thought it would be easy to make different images scroll at different rates, apparently I was wrong.
I would like to recreate something like that scene using images of my own with transparent backgrounds. It's hard to explain the difference, but I am aiming for the example above, not something like this: http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.html (Don't get me wrong, it's a nice effect, but not what I want)
Any ideas or variations of other codes to give the desired effect?
Thanks
PS. If there are any pages that do give the same effect as desired, could a link be provided?
I guess you are looking for a Parallax library like this one (needs jQuery)
http://mmkjony.github.io/enllax.js/
There you can define either foreground or background images and in case you want to create a scene like in your example you have to add "data-enllax-ratio" parameters with different values. See the documentation on GitHub https://github.com/mmkjony/enllax.js
Dorvalla found what I was looking for:
codepen.io/samdbeckham/pen/OPXPNp There is a codepen about this. It's litterly just layers of pictures. What happens is that there is a tat of transformation going on when scrollling. Also, check this medium.com/#hamstu/… for tutorial – Dorvalla
The medium.com website creates the exact effect I am looking for. Even relates to the Firewatch example as well.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.
Using html and jquery/javascript, I want an animation of one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.
Please see attached picture for referance.
If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/
It should get you going in the right direction. Your general approach:
Create a path that swings Box2 into position in step 4.
Change z-index of Box2 to be on top of Box1.
Animate Box2 back along the same path in the opposite direction.
Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown
Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:
http://plugins.jquery.com/project/AnimateRotation
http://plugins.jquery.com/project/jQueryRotate
If anyone has experience with either of these (I don't) leave a comment below for the OP!
Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.
Example:
$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
$myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});
Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.
In my experience rotating in IE is always glitchy.
I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval.
IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.
Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle
http://jquery.malsup.com/cycle/
I'm sure you could take a look at the code there to get some pointers on how to proceed.
There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.
Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.
I need a simple image rotator that rotates images by fading, centers vertically and is accepted by most if not all browsers. I however need to be able to customize the arrow images and place them anywhere i like. Anyone know of one?
If I try to visually show you what I need it would look like this.
< -- My back button [ image ] My next button -- >
I use jquery :) I've given plenty of rotators a shot already but they don't accept images of varying sizes or are not customizable.
If all you need is image rotation, why not do it yourself?
It's only a few lines of jQuery and infinitely customizable. :)
Example:
http://jsfiddle.net/jtbowden/UNZR5/1/
I generally like to stick to using this one: http://jquery.malsup.com/cycle/
It can be as simple or as complex as you need, and is highly extensible. They also provide heaps of examples for what can be done with it.
Example with next/previous buttons here: http://jquery.malsup.com/cycle/int2.html
Have you tried http://aviathemes.com/aviaslider/? It is customizable and is amazing.
Use jQuerytools scrollable by flowplayer. Very lightweight, flexible and they offer a CDN link to there js files so you don't have to load it from your server.
Scrollable http://flowplayer.org/tools/demos/scrollable/gallery.html
Make sure to try out all there available scrollable examples.
CDN links can be found at http://flowplayer.org/tools/download/index.html
Does anyone know how to achieve the cover-flow effect using JavaScript to scroll through a bunch of images. I'm not talking about the 3D rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion.
http://www.jacksasylum.eu/ContentFlow/
is the best I ever found.
a true 'CoverFlow', highly configurable, cross-browser, very smooth action, has relections and supports scroll wheel + keyboard control. - has to be what your looking for!
Not sure if you're talking about Coverflow (scroll through images) or Quicklook (preview files in lightbox), try editing your question.
Here's some JS Coverflow implementations:
MooFlow - Coverflow for MooTools
Coverflow in JS proof of concept
Coverflow using JS and CSS Transforms (Webkit only)
I think this is what you want http://addyosmani.com/blog/jqueryuicoverflow/
I tried using the the Jack's Asylum cover flow but it wouldn't let me easily remove and re-add an entire coverflow. I eventually found http://finnrudolph.de/ImageFlow and not only is it more reliable, it's easier to hook into, uses less markup, and doesn't jitter when flipping through images. It's by far the best I've found, and I've tried several on this page.
There is an Apple style Gallery Slider over at
http://www.jqueryfordesigners.com/slider-gallery/ which uses jQuery and the UI.
jCoverflip was just released and is very customizable.
colorbox has such amazing features..loving it.
Also like this one http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/
Is this what you are looking for?
"Create an Apple Itunes-like banner rotator/slideshow with jQuery" is an article explaining how you can make such effect using jQuery.
You can also view the
live demo.
Try Jquery Interface Elements here - http://interface.eyecon.ro/docs/carousel
Here's a sample. http://interface.eyecon.ro/demos/carousel.html
I looked around for a Jquery image carousel a few months ago and didn't find a good one so I gave up. This one was the best I could find.
Check out momoflow: http://flow.momolog.info
True coverflow effect, and performant on Webkit (Safari and Chrome) and Opera, ok on Firefox.
Just to let you all know, xFlow! has had some major work done on it and is vastly improved.
Go to http://xflow.pwhitrow.com for more info and the latest version.
i am currently working on this and planning on releasing it as a jQuery-ui plugin.
-> http://coulisse.luvdasun.com/
please let me know if you are interested and what you are hoping to see in such a plugin.
gr
the effect that happens when you hit the space bar in a folder of
documents, allowing you to preview them in a lightbox fashion
Looks like a classic lightbox plugin is needed. This is my favorite jQuery lightbox plugin: http://colorpowered.com/colorbox/. It's easy to customize, etc.
This one looks really promising, and closer to the actual Apple coverflow effect than the other examples:
blarnee.com/projects/cflow