I'm trying to do a mixture of three different things. A menu that appears half way down a screen after scrolling, a bouncing arrow and a side menu that opens once clicked.
This is an example page with all of these "attempts" are being made: http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/
(it is made in wordpress btw)
If you scroll half way down, you will see the menu appear on the left.
There are tons of issues with this I can see, but I will fix them as I go. Currently the one that is driving me nuts is a bouncing arrow.
This is what I am trying to replicate: https://codepen.io/dodozhang21/pen/siKtp
The arrow does not bounce, and I am not sure why? I got a new image for the arrow to the left, positioned it correctly and such. Can anyone give me some advice?
Here is the code for what I have done trying to implement this:
html:
<div id="sliderr" >
<div class="arrow bounce">
</div>
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">Explore More</span>
</div>
css (regarding the bouncing arrow):
#import "compass/css3";
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-30px));
}
60% {
#include transform(translateY(-15px));
}
}
.arrow {
position: fixed;
bottom: 40%;
left: 0;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url("http://www.new.techmoney360.com/wp-content/uploads/2016/06/left-arrow-a.png");
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}
css with apearing menu:
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#sliderr {
position:fixed;
top: 100px;
left: 0px;
height: 300px;
width: 130px;
background: #FFF;
margin-left: -200px;
z-index:9;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
More than likely your issue is that you are using the CSS from the example codepen link as is but you are not using the same kind of preprocessor for your CSS. Give this a try change your .bouncs and #keyframes css to the following:
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
If it works now then you are not using SASS or SCSS or any kind of CSS preprocessor. To see the css you need to use make sure to press the "View Compiled" button at the top right of the css window on codepen. It will spit out CSS you can use wihtout passing it through a compiler. Also note that this css includes vendor prefixes so it works cross browser.
Related
i am trying to create animated background slideshow that zoom in the first image and then come back to normal for the next image and zoom it, any ideas please ??
.img-contaner {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: img 20s ease-in-out infinite;
background: url(./1.jpg);
}
#keyframes img{
25%{
background: url(./2.jpg);
transform: scale(1.2);
}
50%{
background: url(./3.jpg);
transform: scale(1.2);
}
75%{
background: url(./4.jpg);
transform: scale(1.2);
}
100%{
background: url(./1.jpg);
transform: scale(1.2);
}
}
i tried this but the image stays zoomed the whole animation
Don't override the background-image using the background: shorthand. You'll override the other background-* styles.
Preload all your images into the browser to prevent flickering using a :before pseudo
It's "container" not "contaner"
Math time:
4 images + 4 transitions + 4 pauses = 12. 100 / 12 = 8.3 Calculate incrementally and floor or round your value to be used as animation keyframes steps:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
.img-container {
position: fixed;
width: 100%;
height: 100%;
background: center / cover no-repeat;
animation: img 20s ease-in-out infinite;
}
/* Preload images to prevent flicker during animation */
.img-container:before {
content: "";
background-image:
url(//placehold.it/500x300/0bf?text=1),
url(//placehold.it/500x300/f0b?text=2),
url(//placehold.it/500x300/bf0?text=3),
url(//placehold.it/500x300/0fb?text=4);
}
#keyframes img {
0%, 8% {
background-image: url(//placehold.it/500x300/0bf?text=1);
transform: scale(1);
}
17% {
transform: scale(1.2);
}
25%, 33% {
background-image: url(//placehold.it/500x300/f0b?text=2);
transform: scale(1);
}
41% {
transform: scale(1.2);
}
50%, 58% {
background-image: url(//placehold.it/500x300/bf0?text=3);
transform: scale(1);
}
66% {
transform: scale(1.2);
}
75%, 83% {
background-image: url(//placehold.it/500x300/0fb?text=4);
transform: scale(1);
}
91% {
transform: scale(1.2);
}
}
<div class="img-container"></div>
I have a loading icon in CSS, when someone clicks on a link the problem is in the mobile version I have a slide menu that open with one tag, or link, and the CSS icon is showing and never disappear.
I need to hide the CSS icon after 3 sec, this is my code.
$('a').click(function(){
$('.loadingDiv').fadeIn('slow', function(){
$('.loadingDiv').delay(3000).fadeOut();
});
$('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
});
.loadingDiv {
position: fixed;
left: 45%;
top: 30%;
width: 100%;
height: 100%;
z-index: 9999;
opacity: .5;
width: 40px;
height: 40px;
background-color: #333;
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
But is not working, any help will be great, because the
Don't forget about setTimeout.
You can simply:
setTimeout(function () {
... do the fading out here ...
}, 3000);
I always prefer vanila-js solution over jQuery one. ;)
Cheers!
My Custom CSS Loader
.LoaderWrap {
width:100%;
margin-top:25px;
box-sizing:border-box;
}
.sampleContainer {
float:left;
height: 40px;
width: 100%;
margin:10px 10px 20px 10px;
box-sizing:border-box;
}
.loader,
.loader.Large {
position:absolute;
left:50%;
box-sizing:border-box;
}
.dot,
.loader.Large .dot {
display: inline-block;
margin-top:20px;
width: 8px;
height: 8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.loader.Large .dot {
width: 24px;
height: 24px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius: 12px;
}
/** Large Dots **/
.loader.Large .dot_1 {
animation: LargeDot1 1.5s linear infinite;
left:38px;
}
#keyframes LargeDot1 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(180deg) translateX(-38px); }
75% { transform: rotate(180deg) translateX(-38px); }
100% { transform: rotate(360deg) translateX(-38px); }
}
.loader.Large .dot_2 {
left:76px;
animation: LargeDot2 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot2 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(-180deg) translateX(-38px); }
75% { transform: rotate(-180deg) translateX(-38px); }
100% { transform: rotate(-360deg) translateX(-38px); }
}
.loader.Large .dot_3 {
left:38px;
animation: LargeDot3 1.5s linear infinite;
}
#keyframes LargeDot3 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(180deg) translateX(38px); }
75% { transform: rotate(180deg) translateX(38px); }
100% { transform: rotate(360deg) translateX(38px); }
}
.loader.Large .dot_4 {
left:76px;
animation: LargeDot4 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot4 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(-180deg) translateX(38px); }
75% { transform: rotate(-180deg) translateX(38px); }
100% { transform: rotate(-360deg) translateX(38px); }
}
<div class="LoaderWrap clearfix">
<div class="loader Large">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
So What's Wrong?
Nothing is 'wrong' as such, feel free to use this loader by all means! However I would like to make this more interesting, turn the dots into stars for example and maybe even go one step further by having the dots (circles) transform into different shapes.
As much as I love CSS and consider myself to be an expert, animating CSS is fairly new to me whereas this is the first CSS animation I have made and I want to make this more unique and crazy for the theme of the website I am working on, not to say that I don't love this loader and asking for, call it improving my skills?, means people will also use, but nevertheless, it is a learning path!
Minimal Question:
How can I have myh dots (circles) as starts OR have my dots (circles) tranform into different shapes, whether it is transforming from basic squares to circles or whatnot using pure CSS and/or JS/jQuery?
I'm a second year application developer student doing an internship at an IT company, and my supervisor asked me to make a dropdown menu that looks and functions exactly like the one found on http://www.veermanict.nl/ at the top when in Mobile mode (you have to resize your window to mobile resolution to see what I'm talking about).
I am a total rookie and I've been struggling with this for two days. JavaScript hasn't even been covered in my education so I'm basically winging everything here, Googling for knowledge. I found a template I can alter in CSS to make it look more like what my supervisor wants, but the problem is that I can't seem to make it work.
I'm talking about this script: http://codepen.io/pedronauck/pen/fcaDw
I tried making an HTML document and linking the CSS and JavaScript to the HTML page like this:
<head>
<meta charset="utf-8">
<title>Menu Test 2</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="dropdown.js"></script>
</head>
... But it will simply show up as: prntscr (dot) com/8dxk4s (I'm not allowed multiple links, sorry)
So that means the CSS does work. But the Javascript doesn't? There are also errors inside of the CSS in Dreamweaver, as far as I can see. And isn't the JavaScript missing a semicolon at rule 25?
Please help me out. I don't want my supervisor to think I'm useless. But I'm stuck on this and he's too busy to help me out. I've tried a dozen of other options but he doesn't settle for mediocre.
Converted CSS from SCSS
Use this css
CSS
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
#import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #2c89c6;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
transform: rotate(-180deg);
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
transform: rotate(0deg);
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
transform-origin: 50%, 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
You're using SCSS (Sass) code as if it's raw CSS. In the Codepen you provided it begins working immediately by changing CSS to SCSS.
The language property for the script tag is deprecated. Use type, not both. Or just not use it at all. The default value is for type is text/javascript on all modern web browsers.
Hello i want this shivering animation or effect on hover same in the url. Kindly guide me Please.Any reference would be appreciated.
Demo https://expatexplorer.hsbc.com/survey/#/countries
(On the map hover any country circle and see moving other small circles.
Very simple example: There are many libraries that handle animation >
jRumble / CSSshake / Animate.css
body {
background-color: #fff;
text-align: center;
margin: 50px
}
.wrapper {
top: 100px;
left: 50%;
text-align: center;
display: inline-block;
}
.shake {
display: inline-block;
position: relative;
}
.circle {
border: 4px solid #f00;
background: #f00;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 0px -10px;
}
#-webkit-keyframes circled {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
.shake:hover,
.shake:focus {
cursor: pointer;
-webkit-animation-name: circled;
-webkit-animation-duration: 0.9s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
<div class="wrapper">
<div class="circle shake"></div>
<div class="circle shake"></div>
<div class="circle shake"></div>
</div>
It's done using Flash rather than css & jQuery - so unless you know Flash or can find that fla file then it will not be a straightforward task.