Nodejs 全屏滑动全动画页面特有的名词是什么？

Nodejs 全屏滑动全动画页面特有的名词是什么？

Untitled.gif 例如 http://fir.im/ http://www.baidu.com/search/is/index.html 这种形式的页面应该叫什么呢？

我猜测原理大概是类似JS实现 轮播图/旋转木马/幻灯片 的原理，然后加上css3的动画，对吗？


7 回复

标题：Node.js 全屏滑动全动画页面特有的名词是什么？

内容：

在现代网页设计中，全屏滑动全动画页面是一种非常流行的设计风格。这种页面通常包含一系列的全屏滑块（slides），每个滑块都有独特的动画效果。这样的页面可能被称为“全屏滑动展示”、“全屏滑动页面”或“全屏滑动动画展示”。

举例

比如，像 Fir.im (http://fir.im/) 和 百度搜索IS (http://www.baidu.com/search/is/index.html) 这样的网站，它们的页面结构和交互方式就是典型的全屏滑动全动画页面。

技术原理

这类页面的技术实现通常涉及以下几点：

  1. CSS3 动画：用于创建平滑的过渡效果。
  2. JavaScript：处理用户交互（如滚动、点击等）和页面的动态更新。

示例代码

以下是一个简单的示例代码，展示如何使用HTML、CSS和JavaScript来创建一个基本的全屏滑动动画页面。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Slideshow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 4em;
    color: white;
    background-color: #333;
    animation: fadeIn 5s ease-in-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

JavaScript (script.js)

const slides = document.querySelectorAll('.slide');
let currentIndex = 0;

function showNextSlide() {
    slides[currentIndex].style.display = 'none';
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].style.display = 'flex';
}

setInterval(showNextSlide, 5000); // 每5秒切换到下一个滑块

总结

全屏滑动全动画页面的主要特点是每个滑块都有独特的视觉效果，并且可以自动或通过用户交互进行切换。这些页面通常使用CSS3动画和JavaScript来实现流畅的用户体验。


审查元素啊，缩放用的animate，css3的东西。 再看js，就是点击事件，鼠标滚轮事件，来控制元素类名的增减，达到动画效果。 其他没什么吧。

https://github.com/alvarotrigo/fullPage.js

哇,才做小demo

width: innerWith height: innerHeight position: fixed left: 0

然后滚轮控制各section 的 top

英语叫做slider 在wordpress平台上有很多插件可以实现 比如slider revolution。 主要是通过jquery等。你可以查看他的代码。

这种叫视差吗？

Node.js 本身是用于服务器端的 JavaScript 运行环境，并不直接处理前端页面的展示效果。但你提到的全屏滑动全动画页面可以使用前端技术栈（如 HTML, CSS, JavaScript）来实现，其中一些名词包括：

  1. 单页应用 (Single Page Application, SPA)：这是一种 Web 应用程序或网站的架构，只有一张静态的网页。用户与应用程序交互时，不会导致整个页面重新加载。
  2. 全屏滚动 (Fullpage.js)：一个 jQuery 插件，可以用来创建全屏滚动效果的页面。
  3. CSS3 动画：通过 CSS3 动画可以让元素在页面上产生过渡效果，提升用户体验。
  4. JavaScript 框架：如 React, Vue 或 Angular 可以用来构建复杂的 SPA 页面。

关于你的问题，这样的页面一般称为“单页应用”或者更具体的“全屏滚动单页应用”。

示例代码

这里给出一个简单的例子，演示如何使用 CSS 和 JavaScript 创建一个基本的全屏滑动页面。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Screen Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slide" id="slide1">Slide 1</div>
    <div class="slide" id="slide2">Slide 2</div>
    <div class="slide" id="slide3">Slide 3</div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.slide {
    width: 100%;
    height: 100vh; /* 视窗高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    transition: transform 0.5s ease-in-out;
}

#slide2 {
    background-color: lightblue;
}

#slide3 {
    background-color: lightgreen;
}

JavaScript (script.js)

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    slides.forEach((slide, index) => {
        slide.style.transform = `translateX(${(index - currentSlide) * 100}vw)`;
    });
}

// 模拟点击事件
setInterval(nextSlide, 3000);

这段代码实现了一个简单的全屏滑动页面，每三秒自动切换到下一个全屏滑动项。

回到顶部