I have some skill bars on my page like this:
And I am using the following CSS to do the animation.
.progress {
height: 10px;
background: #333;
border-radius: 0;
box-shadow: none;
margin-bottom: 30px;
overflow: visible;
}
.progress .progress-bar {
position: relative;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-bar:after {
content: "";
display: inline-block;
width: 9px;
background: #fff;
position: absolute;
top: -10px;
bottom: -10px;
right: -1px;
z-index: 1;
transform: rotate(35deg);
}
.progress .progress-value {
display: block;
font-size: 16px;
font-weight: 600;
color: #333;
position: absolute;
top: -30px;
right: -25px;
}
#-webkit-keyframes animate-positive {
0% {
width: 0;
}
}
#keyframes animate-positive {
0% {
width: 0;
}
}
<div class="progress">
<div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);">
<div class="progress-value">60%</div>
</div>
</div>
How to make them stay at 0% until I scroll to this part? I know the scrollTo function in jQuery but I don't know how to apply to this one.
You can use wowjs alongwith animate.css! It's simple and you can apply effects on any element when it enters the viewport. It also gives you options to manipulate animation delay, animation duration and more.
Here are the links:
WowJS:
http://mynameismatthieu.com/WOW/
AnimateCSS
https://daneden.github.io/animate.css/
Related
I have a circle class element .circle and a navigation bar on a demo homepage home.html. I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
P.S. The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. #keyframes does not seem to be the right solution
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
opacity: 0.7;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 1;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.circle:hover {
width: 60vmin;
height: 60vmin;
opacity: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle:hover .quotes {
opacity: 1;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.circleRe {
background: #D73309;
opacity: 1;
width: 140vmax;
height: 140vmax;
border-radius: 50%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: -500px;
right: -400px;
}
<header>
<nav>
Home
Resume
Archive
Films
</nav>
</header>
<body>
<div class="circle">
<p class="quotes"></p>
</div>
</body>
$('.links').click(function(e) {
e.preventDefault();
//Show the UI Loader here
$('.loaders').show();
setTimeout(function() {
//Hide the UI Loader after 5 seconds
$('.loaders').hide();
}, 5000);
});
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 100;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.loaders {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
/* in FireFox */
filter: alpha(opacity=50);
/* in IE */
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a>
<a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a>
<a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a>
<a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a>
</nav>
</header>
<body>
<div class="circle">
<p class="quotes">
</p>
</div>
<div class="loaders" style="display:none;"></div>
</body>
Note:- Show loader on click and after some times, you can hide that loader.
so the user will not be able to interact with DOM(UI).
Hope this helps!
I have created a preloader which works fine apart from when it is gone it is still there as a invisible layer covering all the content on the page. So none of the content like links can be clicked. How can this be solved but still keep the animation?
Codepen
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
</div>
<div class="section" id="left_sect">
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #666666;
width: 100%;
}
#preloader_wrap{
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section{
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect{
left: 0;
}
#right_sect{
right: 0;
}
#content{
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar{
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div{
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
body.loaded .section{
width: 0;
}
body.loaded #content{
opacity: 0;
}
header{
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul{
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li{
display: inline-block;
font-size: 40px;
}
ul li a{
color: white;
}
JS:
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 2000);
});
Change your script to this...
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('#preloader_wrap').remove();
}, 2000);
});
That will completely remove the layer once the page is loaded.
Its basically a z-index problem on preloader_wrap. You can fix the z-index after the loader is loaded with $("#preloader_wrap").css("z-index","-1")
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
$("#preloader_wrap").css("z-index", "-1");
}, 2000);
});
* {
margin: 0;
padding: 0;
}
body {
background-color: #666666;
width: 100%;
}
#preloader_wrap {
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section {
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect {
left: 0;
}
#right_sect {
right: 0;
}
#content {
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img {
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar {
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div {
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body.loaded .section {
width: 0;
}
body.loaded #content {
opacity: 0;
}
header {
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul {
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li {
display: inline-block;
font-size: 40px;
}
ul li a {
color: white;
}
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
sdsadsadsa
</div>
<div class="section" id="left_sect">
dasdsadsad
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Your loader area has a z-index of 1010, which puts it in front of everything else, and you aren't removing that, or removing the element itself. And because its width and height are 100% it blocks the whole page.
You can fix this just using CSS. You're already doing this:
body.loaded .section{
width:0;
}
body.loaded #content{
opacity: 0;
}
However, this only hides the inner parts of the loader, not the whole thing. Do this instead:
body.loaded #preloader_wrap {
display:none;
}
See working example: https://codepen.io/anon/pen/ZKbJEj
I'm not overly clear on which parts of your markup you are trying to hide, but assuming it's all of the stuff within the preloader_wrap element (and if not I would move that markup outside of it), the issue you are having is that this element is stacked on top of the other elements due to it's z-index being higher.
The easiest fix for this is to add the following CSS:
body.loaded #preloader_wrap {
display: none;
}
I can see that this breaks your animation, you could consider the following instead:
body.loaded #content{
opacity: 0;
display: none;
}
However this feels like a bit of a hack given we wouldn't be hiding the wrapper here therefore if anything else in it gave it height it would still overlay part of the page.
I would consider refactoring your markup/CSS transition to make this work for you in a more consistent way.
1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});
All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>
I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.
As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle
Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')
I would like to have a double hover effect but I do not get it.
I would like to avoid the transition by leaving the appeared icon.
Maybe I get some help here. Any suggestion is welcome.
Here is my HTML:
http://jsfiddle.net/CB5Lr/
<div class="block image addMore" style="position: absolute; top: 100px; left: 50px; height: 350px;width:200px;background-color:red;">
<span data-action="fullView" class="shopIcons full_screen_icon"></span>
<figure class="with-hidden-caption">
please hover here. after a second a icon will apear in the right corner.
<br><br>
If you hover the icon it will change. Until here everything is OK.<br><br>
But, if you leave the icon, it shout show the old one without the rolling effekt.
</figure>
</div>
and the css:
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
/* transition: all; */
}
span.full_screen_icon:hover {
background-position: 0px -50px;
transition-delay: 0s;
transition-duration: 0s;
}
div.addMore:hover span.full_screen_icon {
opacity: 1;
right: 0;
top: 0;
}
http://jsfiddle.net/CB5Lr/
Well, my first idea, use :after (or another element inside the span) because somehow you need to add another element to play with the hover > hover:
http://jsfiddle.net/CB5Lr/7/
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
}
span.full_screen_icon:after {
content: "";
display: none;
width: 45px;
height: 45px;
position: absolute;
top: 0;
left: 0;
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 -50px transparent;
}
span.full_screen_icon:hover:after {
display: block;
}
div.addMore:hover span.full_screen_icon {
opacity:1;
right: 0;
top: 0;
}
This is tricky!