I need to make a smooth wave for my website. I have been trying and did alot of research but cannot find what I want. I have tried all animations on the net but they are not as smooth as the one on this site.
In the attached file, I have trying clip paths which did not work well. I need a wave animation like one on this site
https://rno1.com/
Please help me!
This is my class:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=|Quicksand">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
</head>
<body>
<ul class="nav" id="nav">
<li class="search"><a>Search</a></li>
<li class="home"><a>Home</a></li>
<li class="help"><a>Something</a></li>
<li class="acc"><a>Account</a></li>
<li class="help" id="help">
<button class="helpb" id="helpb">
<a class="helpa" id="helpa">Help</a>
<div class="arrow" id="arrow"></div>
</button></li>
</ul>
<div class="con1">
<div class="wave">
<div class="ani"></div>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #1f1f1f;
overflow: hidden;
font-family: "Quicksand", sans-serif;
}
ul {
display: flex;
align-items: center;
justify-content: center;
position: relative;
list-style-type: none;
}
ul li {
display: inline;
margin-left: 90px;
padding-top: 30px;
font-variant: all-small-caps;
font-size: 20px;
color: whitesmoke;
}
ul li:first-child {
margin-left: 280px;
}
ul li button {
display: flex;
align-items: center;
justify-content: center;
margin-left: 60px;
width: 160px;
height: 60px;
background-color: transparent;
border-radius: 5px;
border: 2px whitesmoke solid;
transition: .5s;
overflow: hidden;
cursor: pointer;
}
ul li button a {
position: absolute;
font-size: 17px;
font-weight: 10000000;
color: whitesmoke;
right: 200px;
font-variant: all-small-caps;
margin-left: 20px;
transition: .5s;
}
.arrow {
position: absolute;
display: block;
margin: 30px auto;
width: 8px;
height: 8px;
right: 150px;
border-top: 2px solid whitesmoke;
border-left: 2px solid whitesmoke;
transform: rotate(135deg);
transition: .5s;
}
.arrow::after {
content: "";
display: block;
width: 2px;
height: 45px;
background-color: whitesmoke;
transform: rotate(-45deg) translate(15px, 4px);
left: 0;
top: 0;
transition: .5s;
}
.con1 {
overflow: hidden;
background-color: transparent;
}
.wave {
height: 60%;
width: auto;
background-color: #6b5da4;
margin-top: 230px;
}
.wave div {
width: auto;
height: 20%;
background-color: #433388;
margin-top: 0;
clip-path: polygon(2% 57%, 99% 56%, 100% 99%, 1% 100%);
transition: 1s;
animation: animate 3s infinite ease-in-out;
}
#keyframes animate {
0%, 100% {
clip-path: polygon(2% 57%, 99% 56%, 100% 99%, 1% 100%);
}
50% {
clip-path: polygon(0% 50%, 11% 60%, 31% 66%, 59% 70%, 84% 73%, 84% 75%, 99% 77%, 100% 99%, 2% 100%);
}
}
</style>
<script>
</script>
</html>```
Related
I copied a hamburger menu with some nice animations, did some adjustments for it to fit into my site, for mobile. Now i'm trying to make that menu get out of the hamburger and into the middle of the screen for desktop. What i'm running into is the menu having really wierd positioning and normal "centering" such as justify-content and others do not work. I also tried putting it into a grid, but with no luck. I'll paste my html and css here and hope you can give me any help, wheter it is how I can center it or just re-writeing things so it works.
What i'm trying to accomplish is the menu being a hamburger for phone and for desktop it should be a "normal" nav-bar centered at the bottom of the site, responsive.
I'm kind of new so it could be kind of janky but yea... :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 95.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
padding: 0 1rem 0 1rem;
position: absolute;
top: 97vh;
right: 38.2vw;
border-radius: 1rem;
height: fit-content;
width: max-content;
}
#menu li {
display: inline-block;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OVERCASTING</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
OVERCASTING
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</header>
</div>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 95.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
padding: 0 1rem 0 1rem;
position: absolute;
top: 97vh;
right: 38.2vw;
border-radius: 1rem;
height: fit-content;
width: max-content;
}
#menu li {
display: inline-block;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
#media only screen and (min-width: 769px) {
#menu-toggle {
right: unset;
position: relative;
top: -30px;
}
}
#media only screen and (min-width: 769px){
#menu {
margin-left: auto;
margin-right: auto;
position: relative;
right: unset;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OVERCASTING</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
OVERCASTING
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</header>
</div>
</main>
</body>
</html>
How does this look?
I've added the following CSS at the end of your CSS block
#media only screen and (min-width: 769px) {
#menu-toggle {
right: unset;
position: relative;
top: -30px;
}
}
#media only screen and (min-width: 769px){
#menu {
margin-left: auto;
margin-right: auto;
position: relative;
right: unset;
}
}
As you can see on the example, when I try to hover the buttons, it does nothing.
Also, i tried to right-click the buttons and go to "inspect element" to see what was the problem, but the chrome inspector selects the parent element.
I tried to change the z-index of all the elements, and give them all the position absolute or relative (because i know z-index has problems with position static).
note: The elements with position absolute have to have position absolute
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
background: rgb(63, 66, 175);
background: linear-gradient(305deg, rgba(63, 66, 175, 1) 0%, rgba(99, 145, 204, 1) 47%, rgba(139, 216, 236, 1) 100%);
}
:root {
--d_blue: rgb(91, 84, 190);
--l_blue: rgb(169, 165, 232);
--minw: 350px;
--maxw: 450px;
--medw: 30%;
--i: 0;
}
#media (pointer:none),
(pointer:coarse) {
:root {
--medw: 100%;
}
}
.layout {
z-index: 1;
position: relative;
display: block;
width: var(--medw);
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
margin: auto;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
}
.presentation-img {
z-index: 2;
display: block;
width: calc(var(--medw));
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
background: white;
border-radius: 20px;
position: absolute;
transform: translate(0px, calc(var(--i)*-100%));
pointer-events: none;
transition: transform 0.3s cubic-bezier(0, 0, .41, 1);
}
.presentation-img #image img {
z-index: 3;
position: relative;
height: 80%;
width: 95%;
margin: 15% 0% 0% 0%;
margin-left: auto;
margin-right: auto;
display: block;
padding: 0% 0% 0% 0%;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#image {
width: 100%;
height: 100%;
}
.btn {
z-index: 4;
position: absolute;
width: 100%;
top: 87%;
display: inline-flex;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.btn div {
z-index: 5;
position: relative;
width: 50px;
height: 50px;
padding: 15px 15px 15px 15px;
}
.btn div:first-child {
margin: 0% 0% 0% 7%;
}
.btn div:first-child:hover {
background: rgb(210, 210, 210);
}
.btn div:last-child {
margin: 0% 7% 0% 0%;
}
.profile,
.buy-votes {
z-index: 999999;
position: relative;
display: block;
background: white;
border-radius: 50%;
box-shadow: 0px 0px 11px #858585;
align-items: center;
text-align: center;
}
.profile:hover,
.buy-votes:hover {
background-color: rgb(214, 214, 214);
}
.profile i,
.buy-votes i {
margin: auto;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>site</title>
</head>
<body>
<div class="layout" id="container">
<div class="presentation-img" id="pres">
<div id="image">
<img draggable="false" touch-action="none" src="https://images.wallpapersden.com/image/download/forests-beautiful-landscape_a2duaWyUmZqaraWkpJRpbWWta2ll.jpg">
</div>
<div class="btn">
<div onclick="console.log('test');" class="profile">
<i class="fa-solid fa-user"></i>
</div>
<div onclick="console.log('test');" class="buy-votes">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
note: the stackoverflow snipet is a bit flat
if you do not understant the stack overflow, I have it too in
jsfiddle
any doubt, just ask, and please help me
I discovered,
I added pointer-events: none to the parent
Basically, I have created an image gallery that looks like the code below. However, I am having trouble creating a hover effect that goes with the images. I would like the hover effect to look something like this if possible: https://codepen.io/jguerra/pen/rNBdYeJ. Could anyone help me with creating this? Any help is appreciated. Thanks.
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*block level elements*/
.page {
margin: 0px;
padding: 0px;
}
.themains {
margin: 0px;
padding: 0px;
max-width: none;
}
.inner {
max-width: 1000px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
height: 400px;
scroll-snap-type: mandatory;
scroll-behavior: smooth;
background: #2C3E50;
border: solid 7px yellow;
font-size: 0px;
margin-bottom: 50px;
}
.scroll-container .scroll-section {
display: inline-block;
vertical-align: middle;
background: transparent;
border: solid 5px #BFC9CA;
white-space: nowrap;
}
/*Slider X (different sized images)*/
.scroll-container.diff-size {
scroll-snap-destination: 50% 0%;
padding: 20px 0px;
}
.scroll-container.diff-size .scroll-section {
width: auto;
height: 100%;
margin-right: 15px;
scroll-snap-coordinate: 50% 0%;
}
.scroll-container.diff-size .scroll-section:first-child {
scroll-snap-coordinate: 0% 0%, 50% 0%;
margin-left: 15px;
}
.scroll-container.diff-size .scroll-section:last-child {
scroll-snap-coordinate: 50% 0%, 100% 0%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Gallery</title>
<meta charset="UTF-8">
<title>Horizontal Scroll Gallery</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<article class="page">
<article class="themains">
<div class="scroll-intro" id="intro"></div>
<div class="inner">
<div class="scroll-container diff-size"><img class="scroll-section" src="https://cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280.jpg"></div>
</div>
<p><br>
<br></p>
</article>
</article><!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</body>
</html>
I would probably position the images inside a container and use the following kind of code in css. Hopefully it helps somehow.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
Try using after and before pseudo-elements to make that white border-lines and give blue(or what color you want) background to image. You can make all them invisible and 0 opacity. And when on hover you can make them visible again. Check this css below.
figcaption {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 4rem;
text-align: center;
}
figcaption::before,
figcaption::after {
content: '';
position: absolute;
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
transition: 0.5s;
}
figcaption::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid white;
border-left: 1px solid white;
transform: scale(1,0);
}
figcaption:hover::before,figcaption:hover::after{
transform: scale(1);
}
and you can make the same thing with text opacity.
I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.
try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});
Hello I want to ask about jQuery
How to add jQuery hover (show) function to my jQuery? ( I want to show #menuwrap when hover that area)
2.I want to add jQuery function, when I click MENU, it will hide #menuwrap again and show another menu content
my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tes - Web Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/tes.js"></script>
<link rel="stylesheet" type="text/css" href="css/tes.css">
</head>
<body>
<div id="titletext">
<h1>... Test ...</h1>
</div>
<div id="menuwrap">
<div id="menu">
<div id="menu1">
</div>
</div>
<div id="menutext">
<h1 id="menucontent" a href="xxx">MENU</h1>
</div>
</div>
</body>
</html>
my CSS
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
margin: 0px !important;
padding: 0px !important;
height: 100%;
width: 100%;
overflow: hidden;
}
html {
min-width: 10%;
min-height: 10%;
}
body {
z-index: -1;
background-attachment: fixed;
background-color: #17807a;
}
#titletext {
position: fixed;
z-index: 1;
margin-top: 0px !important;
padding-top: 0px !important;
height: 70px;
background-color: #ffffff;
}
#titletext h1 {
margin: 0px auto;
text-align: center;
color: #0e4e4b;
font: 40px 'Montserrat';
}
#menuwrap {
position: fixed;
top: 550px;
left: 640px;
}
#menu {
display: block;
position: fixed;
height: 100px;
width: 100px;
border-radius: 70px;
border-width: 5px;
border-style: solid;
border-top-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: transparent;
border-right-color: transparent;
-moz-animation: cw;
-moz-animation: cw 5s infinite;
}
#menu1 {
position: absolute;
height: 70px;
width: 70px;
border-radius: 60px;
border-width: 5px;
border-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #ffffff;
border-right-color: #ffffff;
top: 10px;
left: 10px;
-moz-animation: ccw;
-moz-animation: ccw 3s infinite;
}
#menutext {
position: absolute;
top: 27px;
left: 27px;
}
#menutext h1 {
position: absolute;
font-size: 12px;
color: #ffffff;
letter-spacing: 3px;
top: 19px;
left: 4px;
}
#-moz-keyframes cw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(360deg); }
}
#-moz-keyframes ccw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(-540deg); }
}
my jQuery
jQuery(function() {
setTimeout("jQuery('#menuwrap').fadeOut('2000');", 3000);
});
thanks in advance :)
You can use fadeTo() function for this task:
setTimeout(function () {
$('#menuwrap').fadeTo('slow', 0);
}, 3000);
$('#menuwrap').hover(function () {
$(this).fadeTo('slow', 1);
}, function () {
$(this).fadeTo('slow', 0);
});
Demo: https://jsfiddle.net/sruLsr37/2/