html - 如何使用 html/css 制作 jquery 淡入淡出动画

Question

我正在尝试复制 this

我想复制火焰图标。这些出现在远离我们有文本的中央容器的最右边或左边的每个部分中。

<section id="ourfires" class="portfolio page-section add-top add-bottom">
    <!-- inner-section : starts -->
    <section class="inner-section">
        <!-- container : starts -->
        <section class="container">
            <div class="row">
                <article class="col-md-12">
                    <h1 style="text-align:left;"><span class="animated" data-fx="bounceInRight">Our fire</span></h1>
                    <article id="article"><hr class="hr"></hr></article>
                    <div class="clearfix"></div>
                    <div id="mid">
                        <p class="promod-text dark-text">Our fire is all about <b>Big Brand Ideas</b> that not only have an <b>edge in the market</b> and make a difference in the <b>bottom line</b>,but ieas are: </p>
                        <div>
                            <ul id="navlist" class="promod-text dark-text" >
                                <li>Locally relevant</li>
                                <li>Creatively imagined and executed</li>
                                <li>Internationally recognized</li>
                            </ul>
                        </div>
                    </div>

                </article>
            </div>
        </section>
        <!-- container : ends -->
    </section>
    <!-- inner-section : ends -->
    </div>
</section>

---

#ourfires{
   background-color:#ffffff;
}

Answer 1

如果你希望当页面到达点火图标的位置时图标淡入你必须使用js，因为你必须知道图标何时出现在屏幕上，所以js只是改变类时图标在屏幕上，所有动画都使用 css，想法是将 opacity 从 0 更改为 1 到您想要淡入的元素并设置 transition为这个过程制作动画，为此你可以使用

var elementToAnimate = document.querySelector(".fire-icon");
var heightViewPort = window.innerHeight;


function foundPosition(){
    /* SCROLL DISTANCE */
    var desplaced = self.pageYOffset || document.documentElement.scrollTop;

    /* DESPLACED + HALF OF VIEWPORT, FOR TO ANIMATE THE ICON WHEN IT ARRIVE TO THE HALF OF THE SCREEN */
    var positionAnimate = desplaced + (heightViewPort / 2);

    if(elementToAnimate.offsetTop < positionAnimate){
        elementToAnimate.classList.add("animate-css");
    }
}

onscroll = foundPosition;

html, body, .big-div{
    height: 100%;
}

.fire-icon{
  opacity: 0;
  margin-left: 250px;
  -webkit-transition: 1s;
  transition: 1s;
}

.fire-icon.animate-css{
  opacity: 1;
  margin-left: 0;
}

SCROLL TO SEE THE ANIMATION
<div class="big-div"></div>
    <div class="fire-icon">
        <img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" alt=""/>
    </div>
    <div class="big-div"></div>

你可以根据自己的喜好自定义动画，以上只是举例说明，也可以使用animate.css。

可以看到http://ksesocss.blogspot.com/2015/06/javascript-con-furoya-lazy-load-estoy.html它会对你有很大帮助。

Here a jsfiddle to play with.