参考文献

Question

我希望在滚动到它们时让元素淡入。问题是我需要它在纯粹的香草javascript ...绝对没有jquery。我在网上发现的一切都在jquery中，这是一场斗争。我正在使用tweenMax进行动画制作。请提前感谢您的帮助。

    if(window.scrollY > 550){
    TweenMax.staggerFromTo(newProduct, 1, {opacity:0}, {opacity:1}, 0.5);
}

Answer 1

这里我使用CSS淡入/淡出。

在滚动时我检查元素是否是视口，如果是，我添加类inview，否则我将其删除。如果你想使它只消失，你可以改变选择器以排除inview类。

let section = document.createElement('section');
document.body.appendChild(section);
for (let x = 1; x <= 100; x ++) {
  let d = document.createElement('div');
  d.innerText = `Hello there div line ${x} of 100`;
  section.appendChild(d);
}
  
function inView (el) {
  var sb = section.getBoundingClientRect();
  var eb = el.getBoundingClientRect();
  return !((eb.top + eb.height < 0) || (eb.top > sb.height));
}

function updateInView() {
  for (x of document.querySelectorAll('div')) {
    if (inView(x)) x.classList.add('inview')
    else x.classList.remove('inview');
  }
}

section.onscroll = updateInView;

updateInView();

div {
  opacity: 0.0;
  transition: opacity 1s;
}

div.inview {
  opacity: 1;
}

section {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: black;
  color: yellow;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

Answer 2

<div class="grid">
  <h1 class="grid-item item-heading">Hello I am a heading 1</h1>
  <h2 class="grid-item item-sub-heading">Hello I am a sub-heading 1</h2>
  <h1 class="grid-item item-heading">Hello I am a heading 2</h1>
  <h2 class="grid-item item-sub-heading">Hello I am a sub-heading 2</h2>
  <h1 class="grid-item item-heading">Hello I am a heading 3</h1>
  <h2 class="grid-item item-sub-heading">Hello I am a sub-heading 3</h2>
  <h1 class="grid-item item-heading">Hello I am a heading 4</h1>
  <h2 class="grid-item item-sub-heading">Hello I am a sub-heading 4</h2>
</div>

Option Explicit

Dim wsImport As Worksheet

Sub Sample()
    Dim wsSpec As Worksheet
    
    Set wsImport = ThisWorkbook.Sheets("Import")
    Set wsSpec = ThisWorkbook.Sheets("Specificaties")
    
    Dim CriteriaA As String, CriteriaB As String, CriteriaC As String
    Dim aCell As Range, bCell As Range
    Dim origin As String, KeyToFind As String
    
    With wsSpec
        CriteriaA = .Range("C3").Value2
        CriteriaB = .Range("C4").Value2
        CriteriaC = .Range("C5").Value2
        
        '~~> Using .Find to look for CriteriaA
        Set aCell = .Columns(8).Find(What:=CriteriaA, LookIn:=xlValues, _
        LookAt:=xlWhole, SearchOrder:=xlByRows, SearchDirection:=xlNext, _
        MatchCase:=False, SearchFormat:=False)
        
        '~~> Check if found or not
        If Not aCell Is Nothing Then
            Set bCell = aCell
            
            '~~> Secondary checks
            If aCell.Offset(, 1).Value2 = CriteriaB And _
               aCell.Offset(, 2).Value2 = CriteriaC Then '<~~ If match found
               '~~> Get the origin and the key
               origin = aCell.Offset(, 3).Value2
               KeyToFind = aCell.Offset(, 4).Value2
            Else '<~~ If match not found then search for next match
               Do
                   Set aCell = .Columns(8).FindNext(After:=aCell)
        
                   If Not aCell Is Nothing Then
                        If aCell.Address = bCell.Address Then Exit Do
                        
                        If aCell.Offset(, 1).Value2 = CriteriaB And _
                           aCell.Offset(, 2).Value2 = CriteriaC Then
                           origin = aCell.Offset(, 3).Value2
                           KeyToFind = aCell.Offset(, 4).Value2
                           Exit Do
                        End If
                   Else
                       Exit Do
                   End If
               Loop
            End If
            
            '~~> Check the origin
            If origin = "Supermarket" Then
                CopyRows "F", KeyToFind, False
            ElseIf origin = "Farmer" Then
                CopyRows "H", KeyToFind, True
            Else
                MsgBox "Please check origin. Supermarket/Farmer not found. Exiting..."
            End If
        Else
            MsgBox "Criteria A match was not found. Exiting..."
        End If
    End With
End Sub

'~~> Autofilter and copy filtered data
Private Sub CopyRows(Col As String, SearchString As String, PartialString As Boolean)
    Dim copyFrom As Range
    Dim lRow As Long
    
    With wsImport
        '~~> Remove any filters
        .AutoFilterMode = False
        
        lRow = .Range(Col & .Rows.Count).End(xlUp).Row

        With .Range(Col & "1:" & Col & lRow)
            If PartialString = False Then
                .AutoFilter Field:=1, Criteria1:=SearchString
            Else
                .AutoFilter Field:=1, Criteria1:="=*" & SearchString & "*"
            End If
            
            Set copyFrom = .Offset(1, 0).SpecialCells(xlCellTypeVisible).EntireRow
        End With

        '~~> Remove any filters
        .AutoFilterMode = False
    End With
    
    '~~> Some sheet where you want to paste the output
    Dim SomeSheet As Worksheet
    Set SomeSheet = ThisWorkbook.Sheets("Output")
    
    If Not copyFrom Is Nothing Then
        '~~> Copy and paste to some sheet
        copyFrom.Copy SomeSheet.Rows(1)
        
        'After copying, delete the unwanted columns (OPTIONAL)
    End If
End Sub

这看起来好多了

参考文献

<块引用>

How to fade content as it scrolls into view | selbekk.io

元素淡入滚动PURE香草javascript

2 个答案:

参考文献