Códigos Live #34 - SubidoFlix

Para entender como aplicar os códigos, assista à aula abaixo:

ALTERAR COR DA BARRA DE ROLAGEM

CSS

				
					body::-webkit-scrollbar { 
width: 10px; 
} 
 
body::-webkit-scrollbar-track { 
background: #202020; 
} 
 
body::-webkit-scrollbar-thumb { 
background-color: #d7171e; 
 
border-radius: 10px; 
 
border: 2px solid #202020; 
 
}

ALTERAR COR DA SELEÇÃO DOS ELEMENTOS

CSS

				
					*::selection {
  color: #ffffff;
  background: #d7171e;
}

REMOVER MARGIN PADRÃO DOS WIDGETS DE TEXTO

CSS

				
					p:last-child{
    margin-bottom:0px;
}

DIMINUIR MENU AO FAZER SCROLL

CSS

				
					selector.elementor-sticky--effects{
background-color: #141414 !important;
min-height: 50px;
transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

selector{
    transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

DIMINUIR LOGO AO FAZER SCROLL

CSS

				
					.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}

.elementor-sticky--effects .logo img {
max-width: 115px;
height: auto;
}

TOCAR TUDUM ALEATÓRIO (MENU)

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//tocar tudum menu
let audioButton = document.querySelector('.tudum');   // <-- Mude a classe aqui
       audioButton.addEventListener('click', function(){
        var audio =	document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){	
			var uniqid = Math.random().toString(16).slice(2);
			function randomIntFromInterval(min, max) {  
			  return Math.floor(Math.random() * (max - min + 1) + min)
			}
			document.getElementById("audio").src='Url do arquivo aqui, sem o numero e formato'+randomIntFromInterval(1, 9)+'.ogg?'+uniqid;
			document.getElementById("audio").load(); 
			document.getElementById("audio").play(); 
		},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
</script>

<audio id="audio" src = "url do arquivo aqui"></audio>

ABRIR POPUP DE NOTIFICAÇÃO

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//popup notificacao
    const botaoNotif = document.querySelector('.sino');
    const modalNotif = document.getElementById('popup-notif');
    
    botaoNotif.addEventListener('click', function() {
        modalNotif.classList.toggle('notificacao-ativo');
    });
</script>

<script>
    window.addEventListener('mouseup', function(event){
        
            const notif = document.getElementById('popup-notif');
            
            if (event.target != notif && event.target.parentNode != notif){
                
                notif.classList.remove('notificacao-ativo'); } });
</script>

CSS

				
					.notificacao{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.notificacao-ativo{
    visibility: visible;
    opacity: 1;
}

DEGRADÊ NA SEÇÃO COM VÍDEO

CSS

				
					selector:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom,rgba(20,20,20,0) 0,rgba(20,20,20,.15) 15%,rgba(20,20,20,.35) 29%,rgba(20,20,20,.58) 44%,rgb(20 20 20 / 92%) 78%,#141414 100%);
    background-size: 100% 100%;
    background-position: 0 top;
    background-repeat: repeat-x;
    background-color: transparent;
    width: 100%;
    height: 250px;
    top: auto;
    bottom: 0px;
    opacity: 1;
    z-index: 2;
}

selector:after {
    content: '';
    background: linear-gradient(77deg,hsl(0deg 0% 0% / 94%) 0,rgba(0,0,0,0) 85%);
    position: absolute;
    top: 0;
    left: 0;
    right: 26.09%;
    bottom: 0;
    opacity: 1;
    transition: opacity .5s;
    z-index: 1;
}

HABILITAR O SOM DO VÍDEO DE FUNDO

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//tocar musica de fundo
const audioButton = document.querySelector('.audio-button');
audioButton.addEventListener('click', function(){
    audioButton.classList.toggle('toggle-pause');
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

ALTERAR O ÍCONE DO BOTÃO DE ÁUDIO AO CLICAR

CSS

				
					.toggle-pause .elementor-icon i::before{
    content: '\f028';
}

selector .elementor-icon:hover{
        background: rgb(255 255 255 / 40%);
        cursor: pointer;
}

SELO QUADRADO TOP 1

CSS

				
					selector{
    width: 34px;
    height: 34px;
    background: #d7171f;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

TEXTO DA AULA EM CIMA DA THUMB

CSS

				
					selector p{
  align-items: center;
  background-color: #d7171f;
  display: flex;
  height: 29px;
  justify-content: center;
}

BORDA INTERNA SELO R$ 500 DE DESCONTO

CSS

				
					selector:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgb(255 255 255 / 11%);
    z-index: 3;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 5px;
}

POPUP DAS AULAS (HOVER)

JAVASCRIPT (USAR WIDGET HTML)

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">//importar jquery
</script>

<script>//popup aula 1
$(".aula-1").mouseenter(function() {
		$('.popup-1').addClass('popup-1-ativo');
	}).mouseleave(function() {
		$('.popup-1').removeClass('popup-1-ativo');
	});
</script>

<script>//popup aula 2
$(".aula-2").mouseenter(function() {
		$('.popup-2').addClass('popup-2-ativo');
	}).mouseleave(function() {
		$('.popup-2').removeClass('popup-2-ativo');
	});
</script>

<script>//popup aula 3
$(".aula-3").mouseenter(function() {
		$('.popup-3').addClass('popup-3-ativo');
	}).mouseleave(function() {
		$('.popup-3').removeClass('popup-3-ativo');
	});
</script>

CSS

				
					.popup-1{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-1-ativo{
    visibility: visible;
    opacity: 1;
}

.popup-2{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-2-ativo{
    visibility: visible;
    opacity: 1;
}

.popup-3{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-3-ativo{
    visibility: visible;
    opacity: 1;
}

POPUP TROCA DE PERFIL

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//popup troca de perfil
    const botao = document.querySelector('.trocar-perfil');
    const modal = document.getElementById('popup-perfil');
    
    botao.addEventListener('click', function() {
        modal.classList.add('popup-perfil-ativo');
    })
</script>


<script>
    window.addEventListener('mouseup', function(event){
	const modal = document.getElementById('popup-perfil');
	if (event.target != modal && event.target.parentNode != modal){
        modal.classList.remove('popup-perfil-ativo');
    }
});
</script>

CSS

				
					.popup-perfil{
    visibility: hidden;
    opacity: 0;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -ms-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
}

.popup-perfil-ativo{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

TOCAR TUDUM TROCA DE PERFIL

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//tocar tudum troca de perfil
var tudum1 = document.querySelector('.perfil-1');
var tudum2 = document.querySelector('.perfil-2');
var tudum3 = document.querySelector('.perfil-3');
var tudum4 = document.querySelector('.perfil-4');

       tudum1.addEventListener('click', function(){
        var audio =	document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){	
			var uniqid = Math.random().toString(16).slice(2);
			function randomIntFromInterval(min, max) {  
			  return Math.floor(Math.random() * (max - min + 1) + min)
			}
			document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
			document.getElementById("audio").load(); 
			document.getElementById("audio").play(); 
		},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
       
       tudum2.addEventListener('click', function(){
        var audio =	document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){	
			var uniqid = Math.random().toString(16).slice(2);
			function randomIntFromInterval(min, max) {  
			  return Math.floor(Math.random() * (max - min + 1) + min)
			}
			document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
			document.getElementById("audio").load(); 
			document.getElementById("audio").play(); 
		},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
       
       tudum3.addEventListener('click', function(){
        var audio =	document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){	
			var uniqid = Math.random().toString(16).slice(2);
			function randomIntFromInterval(min, max) {  
			  return Math.floor(Math.random() * (max - min + 1) + min)
			}
			document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
			document.getElementById("audio").load(); 
			document.getElementById("audio").play(); 
		},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
       
       tudum4.addEventListener('click', function(){
        var audio =	document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){	
			var uniqid = Math.random().toString(16).slice(2);
			function randomIntFromInterval(min, max) {  
			  return Math.floor(Math.random() * (max - min + 1) + min)
			}
			document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
			document.getElementById("audio").load(); 
			document.getElementById("audio").play(); 
		},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
    </script>

<audio id="audioTudum" src = "wp-content/uploads/2022/05/tudum8.ogg"></audio>

TOCAR MÚSICA DE FUNDO MOBILE

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//tocar musica de fundo mobile
const audioButton = document.querySelector('.audio-button-2');
audioButton.addEventListener('click', function(){
    audioButton.classList.toggle('toggle-pause-2');
});
</script>


<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-off');
var heroBackgroundVideo = document.querySelector('.herosection-2 video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

BOTÃO CURTIR DO POPUP DAS AULAS

JAVASCRIPT (USAR WIDGET HTML)

				
					<script>//botao curtir do popup das aulas
const curtir1 = document.querySelector('.thumbup1');
const curtir2 = document.querySelector('.thumbup2');
const curtir3 = document.querySelector('.thumbup3');

curtir1.addEventListener('click', function(){
    curtir1.classList.toggle('thumb-ativo');
});

curtir2.addEventListener('click', function(){
    curtir2.classList.toggle('thumb-ativo');
});

curtir3.addEventListener('click', function(){
    curtir3.classList.toggle('thumb-ativo');
});
</script>

CSS

				
					selector .elementor-icon:hover{
        background: rgb(255 255 255 / 40%);
        cursor: pointer;
}

.thumb-ativo .elementor-icon{
    background: #fff !important;
    color: red !important;
}

BORDA BRANCA NA FOTO E MUDANÇA DE COR DO TEXTO (POPUP PERFIL)

CSS

				
					selector{
    cursor: pointer;
    transition: all 1s;
}

selector:hover :where(.foto) {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
    transition: all .3s;
}

selector:hover :where(.texto) {
    color: #ffffff;
    transition: all .3s;
}

selector :where(.foto) {
    transition: all 1s;
}

selector :where(.texto) {
    transition: all .5s;
}

TROCAR FOTO DO PERFIL NO MENU APÓS CLIQUE NO POPUP PERFIL

JAVASCRIPT (USAR WIDGET HTML)

CRÉDITO: Roger Costa

				
					<style type="text/css">
.hide-system-action.ativo{
    opacity:1!important
}

.hide-system-action:not(.ativo){
    transition:.5s
}

.hide-system-action:not(.ativo):hover{
    opacity:1!important
}

body:has(.elementor-editor-active) .hide-system-reaction{
    display:inherit!important
    
}body:not(.elementor-editor-active) .hide-system-reaction{
    display:none
}
</style>
				
			
				
					<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
    if(!window.location.search.includes("elementor")){
        
    var e=document.querySelectorAll(".use-hide-system");
    
    void 0!==e[0]&&e.forEach(function(e){
        
    var t=e.getAttribute("hide-system-section-start-hide"),i=e.getAttribute("hide-system-opacity"),o=e.getAttribute("hide-system-scroll");
    (+i<0&&+i>1||null==i)&&(i=1),console.log("firstSectionHide: ",t);
    
    var s=e.querySelectorAll(".hide-system-action"),l=e.querySelectorAll(".hide-system-reaction");
    
    if(void 0!==s[0]&&void 0!==l[0]){l.forEach(function(e){e.style.display="none"}),null!==t&&""!==t&&null!=t||(s[0].classList.add("ativo"),l[0].style.display="block");
    
    var n=s[0],r=l[0];s.forEach(function(t,s){
        
        t.style.cursor="pointer",t.style.opacity=""+i,t.addEventListener("click",function(s){s.preventDefault(),s.stopPropagation();
    
    var l=t.getAttribute("hide-system-id");if(n.classList.remove("ativo"),n.style.opacity=""+i,r.style.display="none",(n=t).classList.add("ativo"),(r=e.querySelector('.hide-system-reaction[hide-system-id="'+l+'"]')).style.display="block",null!=o&&""!==o){window.scroll({top:function(e){var t=0;if(e.offsetParent)do{t+=e.offsetTop,e=e.offsetParent}while(e);return t<0?0:t}(r)-60,behavior:"smooth"})}})})}})}});
</script>

OC EMPREENDIMENTOS DIGITAIS © CNPJ 38.405.446/0001-79

POLÍTICA DE PRIVACIDADE   •   TERMOS DE USO