Estoy tratando de crear una pequeña animación de introducción para un sitio web. Quiero que pase sin problemas a un logotipo BW blanco después de que se reproduzca la animación.
Con lo que estoy luchando es una vez que se elimina la palabra completa, quiero que las letras B y W se deslicen juntas para formar un pequeño BW después de que el resto de la palabra desaparezca. En este momento, parece que no puedo hacer que el contenedor se encoja sin problemas y fuerce el BW uno al lado del otro.
Tengo un codepen iniciado como referencia. https://codepen.io/patstantpen/pen/eYExopN
$(document).ready(function () { $(".title").click(function () { $(".letter").css("color", "white"); setTimeout(function () { $(".reak, .orld").css("opacity", "0"); }, 1400); }); }); * { font-family: "Montserrat"; font-weight: bold; font-size: 35px; height: 100%; } body { text-align: Center; height: 100%; background-color: #f7a21b; } .wrapper { display: flex; justify-content: center; height: 100%; } .title { height: 100px; align-self: center; color: #a71e29; height: 50px; transition: width 1.4s ease; } .letter { transition: color 1.4s ease; } .reak, .orld { transition: opacity 1.4s ease; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"> <body> <div class='wrapper'> <div class='title'> <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span> </div> </div> </body>Supongo que otra pregunta más amplia es ¿sería mejor hacer esto como un mp4 o gif y reproducirlo en lugar de hacerlo con js?
Debe usar animate () para llevar el ancho Y la opacidad a 0.
https://api.jquery.com/animate/
Y debe usar la regla de alineación vertical en la parte superior para corregir su texto en la parte superior.
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
$(document).ready(function () { $(".title").click(function () { $(".letter").css("color", "white"); setTimeout(function () { $(".reak, .orld").animate({'width': 0, 'opacity': 0}, 1000, function () { $(this).hide(); }); }, 1400); }); }); * { font-family: "Montserrat"; font-weight: bold; font-size: 35px; height: 100%; } body { text-align: Center; height: 100%; background-color: #f7a21b; } .wrapper { display: flex; justify-content: center; height: 100%; } .title { height: 50px; align-self: center; color: #a71e29; transition: width 1.4s ease; } .letter { transition: color 1.4s ease; } .reak, .orld { vertical-align: top; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"> <body> <div class='wrapper'> <div class='title'> <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span> </div> </div> </body>De hecho, puedes hacer casi todo solo con CSS:
$(document).ready(function () { $('.title').click(function () { $('.title').addClass('join'); }); }); * { font-family: "Montserrat"; font-weight: bold; font-size: 35px; height: 100%; } body { text-align: center; background-color: #f7a21b; margin: 0; } .wrapper { display: flex; justify-content: center; } .title { align-self: center; color: #a71e29; height: 50px; cursor: pointer; } .letter, .reak, .orld { white-space: pre; display: inline-block; max-width: 500px; /* needs to be set manually to a sensible value =( */ transition: color 1.4s ease, opacity 1.4s ease 1.4s, max-width 1.4s ease 2.8s; } .join .letter { color: white; } .join .reak, .join .orld { opacity: 0; max-width: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"> <body> <div class="wrapper"> <div class="title"> <span class="letter">B</span><span class="reak">REAKFAAAST </span><span class="letter">W</span><span class="orld">ORLDWIDE</span> </div> </div> </body>Agregué más As para hacer que el efecto de unir las dos letras sea un poco más visible.