Tengo una animación de apertura que solo quiero ejecutar si un usuario visita el sitio web por primera vez. No quiero que el usuario vea la animación cada vez que vuelve a cargar la página, por lo que quiero que la animación solo se ejecute si no se ha configurado una cookie para el usuario.

Pseudocódigo de ejemplo:

if (cookie(userAlreadyVisited) is set {
doAnimation
}
else
{
doNotAnimate
}

Y la animación sería algo como esto:

Html:

<!DOCTYPE html>
<html>
<head>
    <title>Div animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="main"><h1 id="headline-fade">Welcome!</div>
</body>
</html>

Css:

body {
    background-color: black;
    display: flex;
    justify-content: space-around;
}

#main {
    animation-name: example;
    animation-duration: 1.5s;
    position: relative;
    top: 50px;
    width: 750px;
    height: 500px;
    background-color: white;
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
}

#headline-fade {
    animation-name: fontFade;
    animation-duration: 3s;
    margin: auto;
    font-family: Roboto;
}

@keyframes example {
    0% {
        background-color: white;
        width: 2px;
        height: 2px;
    }
    50% {
        background-color: white;
        width: 2px;
        height: 500px;}
    100% {
        background-color: white;
        width: 750px;
        height: 500px;
    }
}

@keyframes fontFade {
    0% {
        opacity: 0;
        margin: auto;
    }
    50% {
        opacity: 0;
        margin: auto;
    }
    100% {
        opacity: 1;
        margin: auto;
    }
}

Para resumir, solo quiero que se ejecuten los fotogramas clave si el usuario está visitando por primera vez o si las cookies han expirado. He intentado jQuery.Keyframes pero no puedo hacer que funcione.

0
Oscar 30 oct. 2017 a las 14:26

3 respuestas

La mejor respuesta

Deje que PHP determine si la cookie existe y úsela en una declaración condicional para agregar una clase al elemento que puede o no estar animado.

Luego puede extender su CSS con esa clase y solo aplicar los estilos animados a los elementos que tienen esta clase.

Como ejemplo:

En su CSS:

#main {
    position: relative;
    top: 50px;
    width: 750px;
    height: 500px;
    background-color: white;
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
}
#main.animated {
    animation-name: example;
    animation-duration: 1.5s;
}

@keyframes example {
    0% {
        background-color: white;
        width: 2px;
        height: 2px;
    }
    50% {
        background-color: white;
        width: 2px;
        height: 500px;}
    100% {
        background-color: white;
        width: 750px;
        height: 500px;
    }
}

En tu HTML:

<div id="main" <?php if (!isset($_COOKIE['userAlreadyVisited'])) { echo class='animated' }; ?>>
<h1 id="headline-fade">Welcome!</h1>

PD: falta la etiqueta de cierre </h1> en el ejemplo de código original.

0
Robert Wade 30 oct. 2017 a las 11:43

Simplemente mantenga todo lo mismo, espere integrar el código php con html como este, supongo que esto funcionaría perfectamente. Intente esto ...

    <?php if (!isset($_COOKIE['userAlreadyVisited'])) { 
?>
<div id="main"><h1 id="headline-fade">Welcome!</div>
<?php
} ?>

Aquí isset verificará si la cookie está almacenada o no y luego, si es simple, si se cumple, ejecutará la declaración que en su caso es un mensaje de bienvenida y, si no se cumple, omitirá el mensaje de bienvenida

0
Prince Arora 30 oct. 2017 a las 12:07

Solo configure animation si tiene una clase particular en el CSS, y en PHP (o en javascript) solo le da esa clase a ese elemento si el usuario ya lo visitó.

0
TKoL 30 oct. 2017 a las 11:29