I'm trying to recreate a part of the preloader of this website - specifically the part where the "red box" swipe ups and reveals what's beneath.
I tried playing with CSS transitions, but I can't seem to find a solution - or even an example - to it. How could I do it without libraries?
Thanks in advance!
Related
I'm looking into creating a wheel animation widget similar to the one on this page https://csh.umn.edu/ (Explore your wellbeing section)? I think I can use Image Maps to link different sections to different pages/content and Javascript to load the content dynamically. But, I'm not sure how to animate the transition. Any help to get me started will be greatly appreciated.
Thanks.
I want to create a page transition in HTML where by clicking an image/text there is this kind of Star Wars hyper jump animation. This means when I click the image/text the page zooms towards that image/text and that image/text turns into a separate page. Does anyone know if this is possible and how to do this? I believe I remember seeing it on a website a long time ago but I can't remember where unfortunately.
The animation I'm describing is similar to this gif https://giphy.com/gifs/bigblueboo-space-scifi-hyperspace-5xtDarHj0ORdxfWtV6g.
Thank you.
You have to use a framework to create custom page transitions, I would suggest swup or barbaJS with gsap
Swup: https://swup.js.org/
barbaJS: https://barba.js.org/
GSAP: https://greensock.com/gsap/
I have seen many websites using smooth scrolling (click here to see an example). So, my question is that how they achieve this effect, do they use some libraries, etc. I have searched for this but didn't find the right answer.
you can try using https://github.com/ivmello/easeScroll this jquery this will help you for smooth scrolling on mousewheel, but for other appering animation you have to use some animation library like gsap
The effect you are looking for is called Parallax. Do a search for "multi layer parallax websites". There was a good how-to with code high up the first page.
Edit: The second part of the example website is the Hero image (the banners) zooming, you can get that searching "Hero image zooming"
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
i want to make text move in 3d circular surface. but i don't know how to do it. i tried lot searching, but found nothing, and i am not expert in css3.
as in this pic
i can afford extra markup for each font, on hover i want to make it move and come in front?
how is it possible in our new css3?
Okay, I can't seem to see exactly what you want to showcase using that image link. I checked out the history and saw that you posted the image of three alphabets. Now CSS3 is awesome because you don't need to use JS anymore for funky animations, you could so this using various js functionalities from already existing functions on libraries. Or you can check out the Zoom function in CSS.
HTML
Mouse over the links to see them change layout.
<div style="display:inline-block">
<p><a class="ex1" href="default.asp">M</a></p>
<p><a class="ex2" href="default.asp">M</a></p>
<p><a class="ex3" href="default.asp">M</a></p>
</div>
CSS
a.ex1:hover,a.ex1:active {zoom:150%;}
a.ex2:hover,a.ex2:active {zoom:150%;}
a.ex3:hover,a.ex3:active {zoom:150%;}
For hover, just used the onmouseover or hover functionality for the same. Example