how to use animation with AOS on pseudo element? - javascript

Normally in HTML file I use AOS like this
<li data-aos="fade-left" class="fields__box">
I try in different way use AOS with pseudo element in my CSS file but I don't do this in the right.
Do you have some idea how can I do that?
Thanks for your help
&::before {
content: "";
position: absolute;
background-image: url(images/logoBig.png);
z-index: -1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 70%;
background-position: center bottom;
// data-aos="fade-up";
}

I haven't used Animate on Scroll (AOS) before, but based on a reading of the docs and CSS Tricks post, I think it can be done.
Here's what AOS is doing, JavaScript-wise:
The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate. Of course, in practice, it’s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.
Based on the source code for the fade-up animation, you could try:
<li data-aos="fade-before-up" class="fields__box">
&::before {
/* ... your properties to style the before element ... */
transition-property: opacity, transform;
opacity: 0
transform: translate3d(0, 100px, 0);
}
&.aos-animate::before {
opacity: 1;
transform: translate3d(0, 0, 0);
}
Key points:
I haven't tested this. Sorry. If you'd like to create a CodePen or a JSFiddle that replicates the current behavior you're seeing, I'll see if I can tweak it.
The data-aos attribute on the HTML element shouldn't match an actual AOS animation. It's just to get the library to put the aos-animate class on the element.
The ::before pseudo-element is initially styled as 0 opacity and 100px below. When AOS adds the aos-animate class to the <li>, then the ::before element can be transitioned.

Related

CSS Zoom effect on load - hide DIV/Image loading latency

I have a web site with a lot of images, I already have lazy-loading but I wish to add some
effects when the images loads
I was looking to reproduce the "zoom" effect when the image is "loading", something like here:
https://masonry.desandro.com/
Please, have a look at this one:
https://tympanus.net/Development/GridLoadingEffects/index8.html
You will notice that there is no effect when the image are already loaded.
I try to hide the 'load latency' when loading an image from the server.
Maybe the animation is not the right trick!
The goal is to have the load softer, now it loads like any image, but the effect is not very nice.
(you can check www.socloze.com for review).
Do you think we can do this in pure CSS (without JS)?
You can add initial animation:
.img-anim {
width: 100px;
height: 100px;
background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
animation-name: scale-in;
animation-duration: .4s;
}
#keyframes scale-in {
0% {
background-size: 0%;
}
100% {
background-size: 100%;
}
}
<div class="img-anim"></div>
You can create initial animation usings css but thats as far as u go, if you need things to pop up as you scroll down then check AOS

Making elements appear as if they share a background

I'm working on a to-do web app and I'm trying to achieve a visual effect wherein multiple todos appear to "share" a single background. So, imagine that a user adds a few todos. Their backgrounds appear as a part of a single gradient, with colors transitioning from top todo to bottom todo. This pen should hopefully demonstrate what I want to happen (click the first div):
Elements 'sharing' a background
HTML:
<div class="outer">
<div class="inner"></div>
<p>CLICK ME</p>
</div>
CSS:
.outer {
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 200px;
background: white;
overflow: hidden;
clip: rect(auto, auto, auto, auto);
transition: transform 500ms ease-in-out;
font-size: 2rem;
}
.inner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to right, red, orange, green, blue);
opacity: 0.5;
}
Now this already kind of works, I guess, but only if I manually animate position of the divs. Is there some way to utilize CSS transforms instead? The big problem there is that as soon as a transform is applied to outer div, the fixed child div stops being fixed, completely destroying the 'same background' illusion. you can see it in this pen:
Illusion fail
I read that it's part of the spec and that's just how it is, but thought maybe you CSS wizards here know other ways to achieve this effect, perhaps even without fixed child divs. Would really appreciate your help.
Here's an example using clip-path, but one issue is that it doesn't clip the same way as clip does, because it only clips the element itself, not child elements under it. Children elements will also get clipped, so they have to be moved to match the new clip position.
https://codepen.io/mix3d/pen/OJPjbGp

Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

I am trying to develop a notification plugin. I have following code
javascript
function notification () {
var wrapper = document.createElement('div'),
docFrag = document.createDocumentFragment();
wrapper.textContent = 'Default text';
wrapper.classList.add('notif');
docFrag.appendChild(wrapper);
document.body.appendChild(docFrag);
var a = window.getComputedStyle(wrapper).height;
wrapper.classList.add('animated');
}
CSS
body {
background: #e2e2e2;
}
.notif {
position: absolute;
padding: 20px;
background: #fff;
display: block;
width: 160px;
margin-bottom: 10px;
opacity: 0;
-webkit-transform: translate3d(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.animated {
opacity: 1;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
When the notification () is called a new notification should be added. When a new notification is being added if already a notification is existing, the existing notification should be animated and pushed down and the new notification should position on top of it. And the notification should be absolutely positioned. But with my code the divs stack upon each other and those do not flow from top to bottom. How can i achieve this.
Here is the working with code: DEMO Please run notification() to see the issue.
here is what i want to develop: Required look
EDIT
It has to be absolutely , or fixed positioned because the notification should not affect the other content of the webpage.
The notifications seem to stack on top of one another because you assigned their position as absolute. If you set their display attribute to block and do not set their position attribute to absolute, you won't have to worry about this. You can still set the position attribute of the container of these notifications to absolute if you wish to free it from positioning relative to the rest of the DOM.
The appendChild() method inserts the element inside the container-element at the end. Try using docFrag.insertBefore(wrapper, docFrag.firstChild);.
It will not work because absolutley positioned elements stay in the specified place. What you could do instead is absolutley position the container and append your divs inside that. Divs as block elements will naturally push themselves down.
Hope this helps
You can do it in a crazy way:
add a wrapper for notification block (notif-wrapper);
each new block (also wrapped with notif-wrapper) insert before all blocks into deepest notification wrapper $newNotifWrapper.insertBefore(jQuery('.nofit-wrapper .notif').last()) and add css .notif .notif {top: 0; left: 0;}
each new notif-wrapper after displaying should animate its height
But obviously, simplier and better way is create a single wrapper for all your notifications, add it once on first notification coming and insert all those new notifications before first child of this wrapper, animating their height, ofcourse.
The reason why they're stack on top of eachother is because they're absolutely positioned. You can use the method here to fix your issue.
Summary of the article:
When positioning elements absolutely their bounding box is by default the body.
However, when you add the absolutely positioned element to a relatively positioned element, the bounding box of the absolutely positioned element will change to the relatively positioned elements space.
The HTML would look something like:
<relative-element>
<absolute-element>
<!-- Content -->
</absolute-element>
</relative-element>
With CSS that would look something like:
relative-element {
position: relative;
}
absolute-element {
position: absolute;
}
Applying the article to your problem
Create a container and position it relatively.
Add another container to it and position it absolutely. (This will hold your notifications)
Add children to the last container and they will stack like you want them to.

swipeable divs that snap to screen

I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}

Rotate content around a central pivot in html5

So Im a graphic desinger and I've been asked to develop a concept for a client's new site. Its a micro-site with limited amounts of content. The idea I have come up with is to place all the sections of the site on divs and then rotate them like a wheel when a user clicks a menu link. What I need to find out is this: Is it possible to rotate entire divs containing normal content around a central pivot point using html5? The rotation needs to be animated the content contained in each rotated div needs to rotate in unison with its container div. If it is possible, how?
I've googled it and found examples of rotating stuff with CSS3 and I've seen html5 transformations but Im not sure I have seen anything this sophisticated before and I can't find any examples to work off. So Im a little concerned its not actually possible for some reason. Im also open to using something like javascript to make this happen.
You can do something like this:
HTML
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
CSS
.container {
transition: transform 1s;
transform: rotate(0);
position: relative;
}
.container>div {
position: absolute;
}
.container.second {
transform: rotate(120deg);
}
.container.third {
transform: rotate(240deg);
}
.container .first {
bottom: 0;
right: 0;
transform: rotate(120deg);
}
.container .second {
left: 0;
right: 0;
transform: rotate(240deg);
}
You can add some simple js to change the container current class.

Categories

Resources