堆栈内存溢出
  简体   繁体   English

投资组合中的动画引导程序

[英]animation bootstrap in portfolio

 原文  2022-07-21 12:46:27  6   1    javascript/ html/ css/ twitter-bootstrap

问题描述

I have an animation problem I would like when I go down the page the animation is activated and not when someone opens my page我遇到了动画问题

<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.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <title>Savinov Denis</title>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-sm bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Compétences</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Tarifs</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">À Propos</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100"
                    style="filter: brightness(10%);" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="animate-text">SAVINOV Denis</h5>
                    <p class="animate-text">Développeur Web Indépendant</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100"
                    style="filter: brightness(10%);" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="animate-text text-center">Création de sites web</h5>
                    <p class="animate-text text-center">Site vitrine, e-commerce, forum et autres</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/10705380.jpg" class="d-block w-100 animate__animated animate__fadeInUp animate__delay-1s" style="filter: brightness(10%);" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5 class="animate-text text-center">Web design, conception graphiques</h5>
                    <p class="animate-text text-center">Logos, plaquettes publicitaire, cartes de visites,
                        newsletters</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="container text-center">
        <h1>MES SERVICES</h1>
        <h3>Des prestations adaptées à vos besoins</h3>
    </div>
    <div class="container text-center">
        <div class="row">
            <div class="col">
                <h5 class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Gestion de projets web</h5>
                <p class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
                <h5 class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Intégration Web</h5>
                <p class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
                <h5 class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Développements spécifiques</h5>
                <p class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Des outils adaptés à votre coeur de métier,
                    applications & solutions personnalisées.</p>
                <h5 class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Référencement naturel</h5>
                <p class="animate__animated animate__fadeInLeft animate__delay-1s text-end">Affichage sémantique des informations,
                    des pages propres pour un référencement optimal.</p>
            </div>
            <div class="col">
                <img src="images/index.jpeg" class="d-block w-100 animate__animated animate__fadeInUp animate__delay-1s" alt="...">
            </div>
            <div class="col">
                <h5 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Conception graphique & Webdesign</h5>
                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start">Logos, templates Web, plaquettes publicitaires,
                    cartes de visite, newsletters...</p>
                <h5 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Dynamisme des pages</h5>
                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start">Des animations de contenu non intrusives
                    pour embellir votre projet.</p>
                <h5 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Interface d'administration</h5>
                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start">Outils spécifiques au bon fonctionnement
                    de votre entreprise.</p>
                <h5 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Responsive design</h5>
                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start">Compatible tous supports, tablette & application mobile.</p>
            </div>
        </div>

        <p>Compatible Mobile, Tablettes & P.C</p>
        <h3>Développement Web Responsive</h3>
    </div>

    <div class="container text-center">
        <h1>MES COMPÉTENCES</h1>
        <h3>Des compétences à votre service</h3>
        <div class="container text-center">
            <div class="row">
                <div class="col">
                    <h1 class="animate__animated animate__fadeInDown animate__delay-1s text-start">Domaines de compétences</h1> 
                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start"> Gestion de projets web </h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start"> Conception graphique & Webdesign </h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters...</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start">Applications spécifiques et Interface d'administration</h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start">Mise en place / Modification / Gestion de CMS</h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start">Intégration (X)HTML / CSS</h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">Codage à la main respectueux des standards du Web</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start"> Dynamise des pages par JavaScript / AJAX </h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">jQuery, Prototype, Mootools, Scriptaculous</p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start">Validation W3C, WAI & référencement naturel SEO</h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start"> Accessibilité & ergonomie des pages web </p>

                    <h4 class="animate__animated animate__fadeInDown animate__delay-1s text-start"> Conception multi-plateformes </h4>
                    <p class="animate__animated animate__fadeInDown animate__delay-1s text-start">Compatible tous supports, tablette & application mobile</p>
                </div>

                <div class="col">
                    <h1>Compétences en développement</h1>
                    <h1>Compétences en conception graphique</h1>
                </div>

                <h1 class="text-center">Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
            </div>
        </div>
    </div>

    <div class="container text-center">
        <h1>MES PROJETS</h1>
        <h4>Une partie des projets sur lesquels j'ai travaillé</h4>
    </div>

    <div class="container text-center">
        <h1>À PROPOS</h1>
        <h4>Je suis développeur web freelance et j'aime ça !</h4>
        <div class="row">
            <div class="col">
                <h4 class="animate__animated animate__fadeInLeft animate__delay-1s text-start">Un développeur web passionné !</h4>
                <p class="animate__animated animate__fadeInLeft animate__delay-1s text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement radical de cursus
                    afin de pouvoir pleinement l'exploiter.</br> </br>

                    Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                    divers projets développés.</br> </br>

                    En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                    développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un plus
                    large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
            </div>

            <div class="col">
                <img src="images/index.jpeg" class="d-block w-100 animate__animated animate__fadeInUp animate__delay-1s" alt="...">
            </div>

            <div class="col">

                <h4 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Expérience en développement</h4>

                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les attentes d'un client
                    et de
                    répondre précisement au besoin demandé en fonction du domaine d'activité.</p>

                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start">Du site vitrine au projet plus complexe, je vous propose une expertise et un développement web qui
                    correspond à vos attentes & à vos besoins.</p>

                <h3 class="animate__animated animate__fadeInRight animate__delay-1s text-start">Un tarif adapté à votre projet</h3>

                <p class="animate__animated animate__fadeInRight animate__delay-1s text-start"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous propose des solutions
                    à
                    votre portée & adaptée à votre budget.</p>

            </div>
        </div>
    </div>

    <div class="container text-center">
        <h1>CONTACTEZ-MOI</h1>
        <h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>

        <div class="row">
            <div class="col animate__animated animate__fadeInRight animate__delay-1s text-start">
                <h6>ADRESSE</h6>
                <p>45, allée des Grives 83390 Cuers</p>
                <h6>Téléphone</h6>
                <p>(+33) 6.15.42.10.45</p>
                <h6>E-mail</h6>
                <p>contact@mcrevoulin.com</p>
                <h6>Horaires</h6>
                <p>Lundi - Vendredi

                    09H00 - 18H00</p>
                <h6>S.I.R.E.N</h6>
                <p>522 491 000</p>
            </div>
            <div class="col">
                <img src="images/index.jpeg" class="d-block w-100 animate__animated animate__fadeInUp animate__delay-1s" alt="..."> 
            </div>
            <div class="col">
                Column
            </div>
        </div>

    </div>

    <script src="javascript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
</body>

</html>

As you can see the animation only works when I open the page, but I need it to open when I scroll down the page.如您所见，动画仅在我打开页面时才有效，但我需要在向下滚动页面时打开它。 If someone can talk me how need to do or send me a tutorial .如果有人可以告诉我需要做什么或给我发一个教程。 I'm still a beginner, sorry for asking such questions.我还是个初学者，不好意思问这样的问题。 Thanks in advance提前致谢

1 个解决方案

解决方案1
 0  2022-07-22 04:56:47

尝试使用这个而不是 animate.js，我希望这能满足你的要求， https://michalsnik.github.io/aos/

解决方案2
 0  2022-07-23 16:01:54

You need to write scroll event in javascript.您需要在 javascript 中编写scroll事件。 element offsetTop minus window height.元素offsetTop减去window高度。 So as soon as element comes in viewport event starts.因此，只要元素进入视口事件就会开始。

Here is an example, you have white window at the bottom right, scroll down a bit you will see an animation: https://jsfiddle.net/gtojg6b4/9/这是一个例子，右下角有一个白色窗口，向下滚动一点你会看到一个动画： https ://jsfiddle.net/gtojg6b4/9/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导程序模板-更改项目组合文本 - Bootstrap template - Change portfolio text 没有插件的投资组合过滤器中的动画损坏 - broken animation in portfolio filter without plugins 具有mixitup可过滤投资组合的自举模式冲突 - bootstrap modal conflicts with mixitup filterable portfolio 多维数据集组合与引导模板插件无法正常工作 - cube portfolio with bootstrap template plugin not working 在 Gatsby 中展示投资组合元素的 Bootstrap 选项卡 - Bootstrap Tabs to Showcase Portfolio Elements in Gatsby 在Bootstrap的Portfolio Item模板上更改图像 - Changing images on Bootstrap's Portfolio Item template 投资组合中的引导轮播不起作用 - bootstrap carrousel in portfolio doesn't work jQuery / Bootstrap Portfolio仅适用于桌面模式 - jQuery/Bootstrap Portfolio only works with modal on desktop jQuery库干扰Java导航栏和可过滤组合的小问题-引导3 - jQuery library interfering with Javascript for navbar & filterable portfolio small issue - bootstrap 3 我对投资组合进行排序后，Bootstrap模式停止工作 - Bootstrap modal stops working after I sort portfolio
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM