- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
参考: Building a WebGL Carousel with React Three Fiber and GSAP 。
效果来源于由 Eum Ray 创建的网站 alcre.co.kr ,具有迷人的视觉效果和交互性,具有可拖动或滚动的轮播,具有有趣的图像展示效果.
本文将使用 WebGL、React Three Fiber 和 GSAP 实现类似的效果。通过本文,可以了解如何使用 WebGL、React Three Fiber 和 GSAP 创建交互式 3D 轮播.
首先,用 createreact app 创建项目 。
npx create-react-app webgl-carsouel
cd webgl-carsouel
npm start
然后安装相关依赖 。
npm i @react-three/fiber @react-three/drei gsap leva react-use -S
首先,创建一个任意大小的平面,放置于原点(0, 0, 0)并面向相机。然后,使用 shaderMaterial 材质将所需图像插入到材质中,修改 UV 位置,让图像填充整个几何体表面.
为了实现这一点,需要使用一个 glsl 函数,函数将平面和图像的比例作为转换参数:
/*
--------------------------------
Background Cover UV
--------------------------------
u = basic UV
s = plane size
i = image size
*/
vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
float rs = s.x / s.y; // aspect plane size
float ri = i.x / i.y; // aspect image size
vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); // new st
vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st; // offset
return u * s / st + o;
}
接下来,将定义2个 uniforms : uRes 和 uImageRes 。每当改变视口大小时,这2个变量将会随之改变。使用 uRes 以像素为单位存储片面的大小,使用 uImageRes 存储图像纹理的大小.
下面是创建平面和设置着色器材质的代码:
// Plane.js
import { useEffect, useMemo, useRef } from "react"
import { useThree } from "@react-three/fiber"
import { useTexture } from "@react-three/drei"
import { useControls } from 'leva'
const Plane = () => {
const $mesh = useRef()
const { viewport } = useThree()
const tex = useTexture(
'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/1.jpg'
)
const { width, height } = useControls({
width: {
value: 2,
min: 0.5,
max: viewport.width,
},
height: {
value: 3,
min: 0.5,
max: viewport.height,
}
})
useEffect(() => {
if ($mesh.current.material) {
$mesh.current.material.uniforms.uRes.value.x = width
$mesh.current.material.uniforms.uRes.value.y = height
}
}, [viewport, width, height])
const shaderArgs = useMemo(() => ({
uniforms: {
uTex: { value: tex },
uRes: { value: { x: 1, y: 1 } },
uImageRes: {
value: { x: tex.source.data.width, y: tex.source.data.height }
}
},
vertexShader: /* glsl */ `
varying vec2 vUv;
void main() {
vUv = uv;
vec3 pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}
`,
fragmentShader: /* glsl */ `
uniform sampler2D uTex;
uniform vec2 uRes;
uniform vec2 uImageRes;
/*
-------------------------------------
background Cover UV
-------------------------------------
u = basic UV
s = screen size
i = image size
*/
vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
float rs = s.x / s.y; // aspect screen size
float ri = i.x / i.y; // aspect image size
vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); // new st
vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st; // offset
return u * s / st + o;
}
varying vec2 vUv;
void main() {
vec2 uv = CoverUV(vUv, uRes, uImageRes);
vec3 tex = texture2D(uTex, uv).rgb;
gl_FragColor = vec4(tex, 1.0);
}
`
}), [tex])
return (
<mesh ref={$mesh}>
<planeGeometry args={[width, height, 30, 30]} />
<shaderMaterial args={[shaderArgs]} />
</mesh>
)
}
export default Plane
首先, 设置一个新组件来包裹 <Plane /> ,用以管理缩放效果的激活和停用.
使用着色器材质 shaderMaterial 调整 mesh 大小可保持几何空间的尺寸。因此,激活缩放效果后,必须显示一个新的透明平面,其尺寸与视口相当,方便点击整个图像恢复到初始状态.
此外,还需要在平面的着色器中实现波浪效果.
因此,在 uniforms 中添加一个新字段 uZoomScale ,存储缩放平面的值 x 、 y ,从而得到顶点着色器的位置。缩放值通过在平面尺寸和视口尺寸比例来计算:
$mesh.current.material.uniforms.uZoomScale.value.x = viewport.width / width
$mesh.current.material.uniforms.uZoomScale.value.y = viewport.height / height
接下来,在 uniforms 中添加一个新字段 uProgress ,来控制波浪效果的数量。通过使用 GSAP 修改 uProgress ,动画实现平滑的缓动效果.
创建波形效果,可以在顶点着色器中使用 sin 函数,函数在平面的 x 和 y 位置上添加波状运动.
// CarouselItem.js
import { useEffect, useRef, useState } from "react"
import { useThree } from "@react-three/fiber"
import gsap from "gsap"
import Plane from './Plane'
const CarouselItem = () => {
const $root = useRef()
const [hover, setHover] = useState(false)
const [isActive, setIsActive] = useState(false)
const { viewport } = useThree()
useEffect(() => {
gsap.killTweensOf($root.current.position)
gsap.to($root.current.position, {
z: isActive ? 0 : -0.01,
duration: 0.2,
ease: "power3.out",
delay: isActive ? 0 : 2
})
}, [isActive])
// hover effect
useEffect(() => {
const hoverScale = hover && !isActive ? 1.1 : 1
gsap.to($root.current.scale, {
x: hoverScale,
y: hoverScale,
duration: 0.5,
ease: "power3.out"
})
}, [hover, isActive])
const handleClose = (e) => {
e.stopPropagation()
if (!isActive) return
setIsActive(false)
}
const textureUrl = 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/1.jpg'
return (
<group
ref={$root}
onClick={() => setIsActive(true)}
onPointerEnter={() => setHover(true)}
onPointerLeave={() => setHover(false)}
>
<Plane
width={1}
height={2.5}
texture={textureUrl}
active={isActive}
/>
{isActive ? (
<mesh position={[0, 0, 0]} onClick={handleClose}>
<planeGeometry args={[viewport.width, viewport.height]} />
<meshBasicMaterial transparent={true} opacity={0} color="red" />
</mesh>
) : null}
</group>
)
}
export default CarouselItem
<Plane /> 组件也要进行更改,支持参数及参数变更处理,更改后:
// Plane.js
import { useEffect, useMemo, useRef } from "react"
import { useThree } from "@react-three/fiber"
import { useTexture } from "@react-three/drei"
import gsap from "gsap"
const Plane = ({ texture, width, height, active, ...props}) => {
const $mesh = useRef()
const { viewport } = useThree()
const tex = useTexture(texture)
useEffect(() => {
if ($mesh.current.material) {
// setting
$mesh.current.material.uniforms.uZoomScale.value.x = viewport.width / width
$mesh.current.material.uniforms.uZoomScale.value.y = viewport.height / height
gsap.to($mesh.current.material.uniforms.uProgress, {
value: active ? 1 : 0,
duration: 2.5,
ease: 'power3.out'
})
gsap.to($mesh.current.material.uniforms.uRes.value, {
x: active ? viewport.width : width,
y: active? viewport.height : height,
duration: 2.5,
ease: 'power3.out'
})
}
}, [viewport, active]);
const shaderArgs = useMemo(() => ({
uniforms: {
uProgress: { value: 0 },
uZoomScale: { value: { x: 1, y: 1 } },
uTex: { value: tex },
uRes: { value: { x: 1, y: 1 } },
uImageRes: {
value: { x: tex.source.data.width, y: tex.source.data.height }
}
},
vertexShader: /* glsl */ `
varying vec2 vUv;
uniform float uProgress;
uniform vec2 uZoomScale;
void main() {
vUv = uv;
vec3 pos = position;
float angle = uProgress * 3.14159265 / 2.;
float wave = cos(angle);
float c = sin(length(uv - .5) * 15. + uProgress * 12.) * .5 + .5;
pos.x *= mix(1., uZoomScale.x + wave * c, uProgress);
pos.y *= mix(1., uZoomScale.y + wave * c, uProgress);
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}
`,
fragmentShader: /* glsl */ `
uniform sampler2D uTex;
uniform vec2 uRes;
// uniform vec2 uZoomScale;
uniform vec2 uImageRes;
/*
-------------------------------------
background Cover UV
-------------------------------------
u = basic UV
s = screen size
i = image size
*/
vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
float rs = s.x / s.y; // aspect screen size
float ri = i.x / i.y; // aspect image size
vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); // new st
vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st; // offset
return u * s / st + o;
}
varying vec2 vUv;
void main() {
vec2 uv = CoverUV(vUv, uRes, uImageRes);
vec3 tex = texture2D(uTex, uv).rgb;
gl_FragColor = vec4(tex, 1.0);
}
`
}), [tex])
return (
<mesh ref={$mesh} {...props}>
<planeGeometry args={[width, height, 30, 30]} />
<shaderMaterial args={[shaderArgs]} />
</mesh>
)
}
export default Plane
这部分是最有趣的,但也是最复杂的,因为必须考虑很多事情.
首先,需要使用 renderSlider 创建一个组用以包含所有图像,图像用 <CarouselItem /> 渲染。 然后,需要使用 renderPlaneEvent() 创建一个片面用以管理事件.
轮播最重要的部分在 useFrame() 中,需要计算滑块进度,使用 displayItems() 函数设置所有 item 位置.
另一个需要考虑的重要方面是 <CarouselItem /> 的 z 位置,当它变为活动状态时,需要使其 z 位置更靠近相机,以便缩放效果不会与其他 meshs 冲突。这也是为什么当退出缩放时,需要 mesh 足够小以将 z 轴位置恢复为 0 (详见 <CarouselItem /> )。也是为什么禁用其他 meshs 的点击,直到缩放效果被停用.
// data/images.js
const images = [
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/1.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/2.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/3.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/4.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/5.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/6.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/7.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/8.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/9.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/10.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/11.jpg' },
{ image: 'https://raw.githubusercontent.com/supahfunk/webgl-carousel/main/public/img/12.jpg' }
]
export default images
// Carousel.js
import { useEffect, useRef, useState, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { usePrevious } from 'react-use'
import gsap from 'gsap'
import CarouselItem from './CarouselItem'
import images from '../data/images'
// Plane settings
const planeSettings = {
width: 1,
height: 2.5,
gap: 0.1
}
// gsap defaults
gsap.defaults({
duration: 2.5,
ease: 'power3.out'
})
const Carousel = () => {
const [$root, setRoot] = useState();
const [activePlane, setActivePlane] = useState(null);
const prevActivePlane = usePrevious(activePlane)
const { viewport } = useThree()
// vars
const progress = useRef(0)
const startX = useRef(0)
const isDown = useRef(false)
const speedWheel = 0.02
const speedDrag = -0.3
const $items = useMemo(() => {
if ($root) return $root.children
}, [$root])
const displayItems = (item, index, active) => {
gsap.to(item.position, {
x: (index - active) * (planeSettings.width + planeSettings.gap),
y: 0
})
}
useFrame(() => {
progress.current = Math.max(0, Math.min(progress.current, 100))
const active = Math.floor((progress.current / 100) * ($items.length - 1))
$items.forEach((item, index) => displayItems(item, index, active))
})
const handleWheel = (e) => {
if (activePlane !== null) return
const isVerticalScroll = Math.abs(e.deltaY) > Math.abs(e.deltaX)
const wheelProgress = isVerticalScroll ? e.deltaY : e.deltaX
progress.current = progress.current + wheelProgress * speedWheel
}
const handleDown = (e) => {
if (activePlane !== null) return
isDown.current = true
startX.current = e.clientX || (e.touches && e.touches[0].clientX) || 0
}
const handleUp = () => {
isDown.current = false
}
const handleMove = (e) => {
if (activePlane !== null || !isDown.current) return
const x = e.clientX || (e.touches && e.touches[0].clientX) || 0
const mouseProgress = (x - startX.current) * speedDrag
progress.current = progress.current + mouseProgress
startX.current = x
}
// click
useEffect(() => {
if (!$items) return
if (activePlane !== null && prevActivePlane === null) {
progress.current = (activePlane / ($items.length - 1)) * 100
}
}, [activePlane, $items]);
const renderPlaneEvents = () => {
return (
<mesh
position={[0, 0, -0.01]}
onWheel={handleWheel}
onPointerDown={handleDown}
onPointerUp={handleUp}
onPointerMove={handleMove}
onPointerLeave={handleUp}
onPointerCancel={handleUp}
>
<planeGeometry args={[viewport.width, viewport.height]} />
<meshBasicMaterial transparent={true} opacity={0} />
</mesh>
)
}
const renderSlider = () => {
return (
<group ref={setRoot}>
{images.map((item, i) => (
<CarouselItem
width={planeSettings.width}
height={planeSettings.height}
setActivePlane={setActivePlane}
activePlane={activePlane}
key={item.image}
item={item}
index={i}
/>
))}
</group>
)
}
return (
<group>
{renderPlaneEvents()}
{renderSlider()}
</group>
)
}
export default Carousel
<CarouselItem> 需要更改,以便根据参数显示不同的图像,及其他细节处理,更改后如下:
// CarouselItem.js
import { useEffect, useRef, useState } from "react"
import { useThree } from "@react-three/fiber"
import gsap from "gsap"
import Plane from './Plane'
const CarouselItem = ({
index,
width,
height,
setActivePlane,
activePlane,
item
}) => {
const $root = useRef()
const [hover, setHover] = useState(false)
const [isActive, setIsActive] = useState(false)
const [isCloseActive, setIsCloseActive] = useState(false);
const { viewport } = useThree()
const timeoutID = useRef()
useEffect(() => {
if (activePlane === index) {
setIsActive(activePlane === index)
setIsCloseActive(true)
} else {
setIsActive(null)
}
}, [activePlane]);
useEffect(() => {
gsap.killTweensOf($root.current.position)
gsap.to($root.current.position, {
z: isActive ? 0 : -0.01,
duration: 0.2,
ease: "power3.out",
delay: isActive ? 0 : 2
})
}, [isActive])
// hover effect
useEffect(() => {
const hoverScale = hover && !isActive ? 1.1 : 1
gsap.to($root.current.scale, {
x: hoverScale,
y: hoverScale,
duration: 0.5,
ease: "power3.out"
})
}, [hover, isActive])
const handleClose = (e) => {
e.stopPropagation()
if (!isActive) return
setActivePlane(null)
setHover(false)
clearTimeout(timeoutID.current)
timeoutID.current = setTimeout(() => {
setIsCloseActive(false)
}, 1500);
// 这个计时器的持续时间取决于 plane 关闭动画的时间
}
return (
<group
ref={$root}
onClick={() => setActivePlane(index)}
onPointerEnter={() => setHover(true)}
onPointerLeave={() => setHover(false)}
>
<Plane
width={width}
height={height}
texture={item.image}
active={isActive}
/>
{isCloseActive ? (
<mesh position={[0, 0, 0.01]} onClick={handleClose}>
<planeGeometry args={[viewport.width, viewport.height]} />
<meshBasicMaterial transparent={true} opacity={0} color="red" />
</mesh>
) : null}
</group>
)
}
export default CarouselItem
真正吸引我眼球并激发我复制次轮播的是视口边缘拉伸像素的效果.
过去,我通过 @react-three/postprocessing 来自定义着色器多次实现此效果。然而,最近我一直在使用 MeshTransmissionMaterial ,因此有了一个想法,尝试用这种材料覆盖 mesh 并调整设置实现效果。效果几乎相同! 。
诀窍是将 material 的 thickness 属性与轮播滚动进度的速度联系起来,仅此而已.
// PostProcessing.js
import { forwardRef } from "react";
import { useThree } from "@react-three/fiber";
import { MeshTransmissionMaterial } from "@react-three/drei";
import { Color } from "three";
import { useControls } from 'leva'
const PostProcessing = forwardRef((_, ref) => {
const { viewport } = useThree()
const { active, ior } = useControls({
active: { value: true },
ior: {
value: 0.9,
min: 0.8,
max: 1.2
}
})
return active ? (
<mesh position={[0, 0, 1]}>
<planeGeometry args={[viewport.width, viewport.height]} />
<MeshTransmissionMaterial
ref={ref}
background={new Color('white')}
transmission={0.7}
roughness={0}
thickness={0}
chromaticAberration={0.06}
anisotropy={0}
ior={ior}
/>
</mesh>
) : null
})
export default PostProcessing
因为后处理作用于 <Carousel /> 组件,所以需要进行相应的更改,更改后如下:
// Carousel.js
import { useEffect, useRef, useState, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { usePrevious } from 'react-use'
import gsap from 'gsap'
import PostProcessing from "./PostProcessing";
import CarouselItem from './CarouselItem'
import { lerp, getPiramidalIndex } from "../utils";
import images from '../data/images'
// Plane settings
const planeSettings = {
width: 1,
height: 2.5,
gap: 0.1
}
// gsap defaults
gsap.defaults({
duration: 2.5,
ease: 'power3.out'
})
const Carousel = () => {
const [$root, setRoot] = useState();
const $post = useRef()
const [activePlane, setActivePlane] = useState(null);
const prevActivePlane = usePrevious(activePlane)
const { viewport } = useThree()
// vars
const progress = useRef(0)
const startX = useRef(0)
const isDown = useRef(false)
const speedWheel = 0.02
const speedDrag = -0.3
const oldProgress = useRef(0)
const speed = useRef(0)
const $items = useMemo(() => {
if ($root) return $root.children
}, [$root])
const displayItems = (item, index, active) => {
const piramidalIndex = getPiramidalIndex($items, active)[index]
gsap.to(item.position, {
x: (index - active) * (planeSettings.width + planeSettings.gap),
y: $items.length * -0.1 + piramidalIndex * 0.1
})
}
useFrame(() => {
progress.current = Math.max(0, Math.min(progress.current, 100))
const active = Math.floor((progress.current / 100) * ($items.length - 1))
$items.forEach((item, index) => displayItems(item, index, active))
speed.current = lerp(speed.current, Math.abs(oldProgress.current - progress.current), 0.1)
oldProgress.current = lerp(oldProgress.current, progress.current, 0.1)
if ($post.current) {
$post.current.thickness = speed.current
}
})
const handleWheel = (e) => {
if (activePlane !== null) return
const isVerticalScroll = Math.abs(e.deltaY) > Math.abs(e.deltaX)
const wheelProgress = isVerticalScroll ? e.deltaY : e.deltaX
progress.current = progress.current + wheelProgress * speedWheel
}
const handleDown = (e) => {
if (activePlane !== null) return
isDown.current = true
startX.current = e.clientX || (e.touches && e.touches[0].clientX) || 0
}
const handleUp = () => {
isDown.current = false
}
const handleMove = (e) => {
if (activePlane !== null || !isDown.current) return
const x = e.clientX || (e.touches && e.touches[0].clientX) || 0
const mouseProgress = (x - startX.current) * speedDrag
progress.current = progress.current + mouseProgress
startX.current = x
}
// click
useEffect(() => {
if (!$items) return
if (activePlane !== null && prevActivePlane === null) {
progress.current = (activePlane / ($items.length - 1)) * 100
}
}, [activePlane, $items]);
const renderPlaneEvents = () => {
return (
<mesh
position={[0, 0, -0.01]}
onWheel={handleWheel}
onPointerDown={handleDown}
onPointerUp={handleUp}
onPointerMove={handleMove}
onPointerLeave={handleUp}
onPointerCancel={handleUp}
>
<planeGeometry args={[viewport.width, viewport.height]} />
<meshBasicMaterial transparent={true} opacity={0} />
</mesh>
)
}
const renderSlider = () => {
return (
<group ref={setRoot}>
{images.map((item, i) => (
<CarouselItem
width={planeSettings.width}
height={planeSettings.height}
setActivePlane={setActivePlane}
activePlane={activePlane}
key={item.image}
item={item}
index={i}
/>
))}
</group>
)
}
return (
<group>
{renderPlaneEvents()}
{renderSlider()}
<PostProcessing ref={$post} />
</group>
)
}
export default Carousel
// utils/index.js
/**
* 返回 v0, v1 之间的一个值,可以根据 t 进行计算
* 示例:
* lerp(5, 10, 0) // 5
* lerp(5, 10, 1) // 10
* lerp(5, 10, 0.2) // 6
*/
export const lerp = (v0, v1, t) => v0 * (1 - t) + v1 * t
/**
* 以金字塔形状返回索引值递减的数组,从具有最大值的指定索引开始。这些索引通常用于在元素之间创建重叠效果
* 示例:array = [0, 1, 2, 3, 4, 5]
* getPiramidalIndex(array, 0) // [ 6, 5, 4, 3, 2, 1 ]
* getPiramidalIndex(array, 1) // [ 5, 6, 5, 4, 3, 2 ]
* getPiramidalIndex(array, 2) // [ 4, 5, 6, 5, 4, 3 ]
* getPiramidalIndex(array, 3) // [ 3, 4, 5, 6, 5, 4 ]
* getPiramidalIndex(array, 4) // [ 2, 3, 4, 5, 6, 5 ]
* getPiramidalIndex(array, 5) // [ 1, 2, 3, 4, 5, 6 ]
*/
export const getPiramidalIndex = (array, index) => {
return array.map((_, i) => index === i ? array.length : array.length - Math.abs(index - i))
}
总之,通过使用 React Three Fiber 、GSAP 和一些创造力,可以在 WebGL 中创建令人惊叹的视觉效果和交互式组件,就像受 alcre.co.kr 启发的轮播一样。希望这篇文章对您自己的项目有所帮助和启发! 。
最后此篇关于使用ReactThreeFiber和GSAP实现WebGL轮播动画的文章就讲到这里了,如果你想了解更多关于使用ReactThreeFiber和GSAP实现WebGL轮播动画的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是,我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗? http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源,但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时,它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板,它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮,上一个和下一个。 单击下一步按钮时,文本框/文本区域会切
我想构建一个包含两个图像轮播的网页,并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ,我找到了一些代码并尝试了,但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片,只能在移动设备上使用。在桌面上,这些图像将显示在 3 列中。有没有一种方法可以自动转换,而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个? 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ,我给了元素框阴影。但我坚持制作不同位置元素的效果,例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时,并尝试观看一些不同的教程。问题是 slider 加载,有 3 张幻灯片的空间,但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证),但轮播不会更改
我的 carouse/slider 有问题,我已经做到了,上一张和下一张图片每边各占 25%,中央图片占 50% 宽度。问题是我能够更改左右图像的背景,但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景,即一张图片会显示一小段时间(比如每张一秒钟),然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点? 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ,用于显示水平可滚动项目列表(例如, eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像,并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码;我真的很想让它适用于无限数量的图像。 {% if page.d
大家好,我有这段代码,我一直在为我的网站编写代码。我正在尝试实现一个轮播功能,其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播,一旦用户水平滚动,事件点就会改变事件状态。但是,当我滚动时,jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方,但现在文本出现在图像上,而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高,我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中,http://jsfiddle.ne
我是一名优秀的程序员,十分优秀!