-
Similar Content
-
By Sapinn
Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
Codigo js
window.onscroll = function(){
var top = window.pageXOffset || document.documentElement.scrollTop
var barra = document.querySelector(".barra");
if(top > 900){
barra.style.display = 'flex';
//aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
barra.classList.add('transition');
}else{
barra.style.display = 'none';
}
}
Codigo css
.barra{
width: 100%;
height: 70px;
background-color: #090b13;
display: none;
justify-content: space-between;
position: fixed;
opacity: 0;
}
.transition{
transition: 1s;
opacity: 0.7;
}
codigo HTML
<div class="barra" >
<img src="assets/images/logo-nopad.svg" alt="">
<button class="botao-assinatura-header">Assine Agora</button>
</div>
-
By jackrs
Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo.
https://jsfiddle.net/h2av6nct/
-
By Carlos Web Soluções Web
Olá, pessoal, boa tarde !!
Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!
Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:
<!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor !
Obrigado !!
-
By João Paulo Bianchi
Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk
Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática.
Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia.
O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens.
Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/
Segue o slider:
<div class="div-slider"> <ul class="slides-front"> <input type="radio" name="radio-btn" id="img-1" checked=""> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </div> E o CSS do mesmo:
/*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/ @import url(https://fonts.googleapis.com/css?family=Varela+Round); .div-slider{ width: auto; height: 400px; text-align: center; } .slides-front { padding: 0; width: 980px; height: 370px; display: block; margin: auto; position: relative; } .slides-front * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides-front input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 980px; height: 370px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out 0.1s; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out 0.1s; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: relative; text-align: center; } .nav-dots .nav-dot { top: 375px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); }
Acho que é isso (:
Qualquer ajuda é bem vinda. Valeeeeu
-
By xDenisX
Eae pessoal tudo bem ?
Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes.
Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ?
( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? )
Obrigado pela atenção o código esta abaixo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>
-