Question

我的网站上的div已经在页面加载时淡入淡出，但是当用户滚动到它们时我试图改变一些淡入淡出。我使用css为div设置了动画，我很满意并试图编写jQuery来实现这一点，但它似乎并没有起作用？

首先，当用户滚动到div类时，我会考虑使用div-header淡入淡出。

HTML

.about-container {
height: auto;
width: 100%;
float: left;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.about-header {
height: auto;
width: 100%;
margin-top: 20px;
text-align: center;
font-size: 30px;
font-weight: 400;
color: #707070;
font-family: 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
line-height: 1.3;
}


.about-biography {
height: auto;
width: 40%;
margin-top: 20px;
text-align: center;
margin-left: auto;
margin-right: auto; 
}

.about-profile-image {
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background-image: url(../images/danmorris_profile.png);
}

 .about-details {
height: auto;
width: auto;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

.about-me {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
margin-bottom: 40px;
}

.about-what-i-do {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
margin-bottom: 40px;
}

.about-connect {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
}

.about-me-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/about_icon.png);
background-repeat: no-repeat;
}


.about-me-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}



.about-me-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}

.about-what-i-do-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/work_icon.png);
background-repeat: no-repeat;
}

.about-what-i-do-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}



.about-what-i-do-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}

.about-contact-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/conact_icon.png);
background-repeat: no-repeat;

}

.about-contact-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}

.about-contact-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}


.about-detail {
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
height: auto;
margin-bottom: 20px;
}

CSS

@-webkit-keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}


.fadeIn {
-webkit-animation: fadeIn 1s ease-in .5s both;
animation: fadeIn .1s ease-in .5s both;
}

FADE ANIMATION

$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("..about-header").height();
var viewPortSize = $(window).height();

var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

if ($(window).scrollTop() >= triggerHeight) {
    $('.fadein').css('visibility', 'visible').hide().fadeIn();
    $(this).off('scroll');
}
});

JQUERY

@component   
public class FormFilter extends DroplistFilterEditor{    

   @Autowire   
   private PersonService personService;

   @Override
   protected List<Option> getOptions()
   {
      List<Option> options = new ArrayList<Option>();
      try {
         String fieldName = getColumn().getProperty();
         List<StudyListView> studyList = null;
         studyList=personService.findList();
         for(StudyListView study:studyList){
           options.add(new Option(study.getId(),study.getDesc()));
         }       
     } catch (Exception ex) {
       ex.printStackTrace();
     }
     return options;
   }
}

Answer 1

您正在使用css中的关键帧动画来淡入并使用jquery fadeIn。

使用任何一种方法。

页面滚动时淡入div

1 个答案: