So i make websites as a hobby nothing professional,
but i found a really well made website and i thought it had some things i never saw being used before like 3 images in one div ( which i searched up and found out how to do it ).
But what i could not simply google was how he made each image move seperately on mouse y movement, i do not know if this is doable with just css or would i need to use javascript as well? ( note: i hardly know any javascript ).
Here is the website: https://buy.cosmicpvp.com/
what i was referring to is the top portion of the website.
This is called the Parallax effect.
Looks like the website in question used this jQuery plugin for it.
To answer your question, you most certainly need JavaScript.
Related
I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect
Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.
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
I'm looking for a simple image slider content with the following features in GWT:
slide several images from right to left when user clicks on the image
(selected image should be at the center)
endless looping (the last image should be followed by the first image
again)
We tried a lot on web for slider but no result.
any recommendations?
Help would be appreciated.
I'm not aware of any native GWT sliders. The easiest way to implement one is probably to use a pre-made Javascript version from, well, pretty much anywhere on the web. You can learn about wrapping Javascript libraries here, here and here, and find lots of other resources by searching Google.
I'm looking into a solution for work, where you have a two page spread of the book to preview. Either side of this, you can hover in the corner to create a pseudo-flip and then click the mouse button to actually turn the page. I know there is many Flash solutions out there, but in this case we cannot use it... So we are looking for a possible solution that can work across all major browsers (yes, including IE6)...
I looked a few canvas solutions, but with Google's canvas extension for IE, these will terribly slow. So was thinking about an SVG/VML solution, like Raphael Javascript library. This could be good, but then trying to look into how to code this, without examples, could be a challenge with the time constraint.
Is there a solution out there that fits (or almost fits) this problem?
How about the SVG Flip solution by Paul Brunt? It seems to do exactly what you ask for, using svg and javascript.
Here are a few demos for different browser generations:
Book flip via CSS3 transforms
Book flip via CSS2.1 absolute positioning
Book flip via DHTML
I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.
What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.
For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.
Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.
For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });
You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.
Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.
You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)