我已经在此处检查了先前的答案,但仍然没有有效的解决方案。我有一个gatsby静态站点,该站点在桌面上实现了无限滚动背景,而在移动设备上,它只是同一背景的静止图像。奇怪的是,我在登录页面上只有一个问题,我在其他页面上都实现了同样的问题。同样,此问题仅在部署后出现。一切都很好,因为我正在使用Safari开发。我的造型看起来像一盘意大利面,因为我一直很茫然,所以我一直在尝试我能想到的任何东西...
我的代码:
import React from "react";
import './index.scss';
import Navbar from '../components/camconavbar.js';
import BackgroundImage from '../../static/Untitled-1.jpg';
import Particles from '../components/particles.js';
import ParticleCamCo from '../../static/CamCo(solid).svg';
import { motion, AnimatePresence } from 'framer-motion';
import { Link } from 'gatsby';
const Home = ({ isVisible }) => {
return (
<div className="container">
<motion.div className="intro-nav" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 17}}>
<Navbar className="intro-nav" />
</motion.div>
<Particles />
<motion.div className="logo-container" initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 5}}>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
</motion.div>
<motion.div initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 15}}>
<motion.div initial={{y: 0}} animate={{y: -310}} transition={{duration: 2, delay: 5}}>
<motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 2}}>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.3, times: [0, 0.1, 0.12, 0.2], delay: 2}}>We</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.6, times: [0, 0.1, 0.12, 0.2], delay: 2}}> are</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.9, times: [0, 0.1, 0.12, 0.2], delay: 2}}>the</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.2, times: [0, 0.1, 0.12, 0.2], delay: 2}}>future</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.5, times: [0, 0.1, 0.12, 0.2], delay: 2}}>of</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.8, times: [0, 0.1, 0.12, 0.2], delay: 2}}>entrepreneurship</motion.h1>
</motion.div>
<motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2}}>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.1, times: [0, 0.1, 0.12, 0.2], delay: 2}}>and</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.4, times: [0, 0.1, 0.12, 0.2], delay: 2}}>business</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.7, times: [0, 0.1, 0.12, 0.2], delay: 2}}>development.</motion.h1>
</motion.div>
</motion.div>
<motion.div initial={{opacity: 0, y: 100}} animate={{opacity: 1, y: -295}} transition={{duration: 2, delay: 5}}>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.2, delay: 6.5}}>The</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.4, delay: 6.5}}>vision</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.6, delay: 6.5}}>and</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.8, delay: 6.5}}>mission</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1, delay: 6.5}}>for</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.2, delay: 6.5}}>CamCo</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.4, delay: 6.5}}>Commercial</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.6, delay: 6.5}}>Inc</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.8, delay: 6.5}}>is</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 6.5}}>to</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.2, delay: 6.5}}>create</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.4, delay: 6.5}}>a</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.6, delay: 6.5}}>platform</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.8, delay: 6.5}}>to</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3, delay: 6.5}}>empower</motion.h3>
</motion.div>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.2, delay: 6.5}}>the</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.4, delay: 6.5}}>future</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.6, delay: 6.5}}>leaders</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.8, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4, delay: 6.5}}>our</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.2, delay: 6.5}}>world</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.4, delay: 6.5}}>by</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.6, delay: 6.5}}>creating</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.8, delay: 6.5}}>a</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 6.5}}>network</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.2, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.4, delay: 6.5}}>businesses</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.6, delay: 6.5}}>and</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.8, delay: 6.5}}>business</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6, delay: 6.5}}>opportunities</motion.h3>
</motion.div>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.2, delay: 6.5}}>that</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.4, delay: 6.5}}>will</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.6, delay: 6.5}}>provide</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.8, delay: 6.5}}>employment</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7, delay: 6.5}}>for</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.2, delay: 6.5}}>thousands</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.4, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.6, delay: 6.5}}>people</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.8, delay: 6.5}}>around</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8, delay: 6.5}}>the</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8.2, delay: 6.5}}>world.</motion.h3>
</motion.div>
</motion.div>
</motion.div>
<motion.div className="logo-container" initial={{opacity: 0, y:-780}} animate={{opacity: 1, y:-780}} transition={{duration: 2, delay: 16}}>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
</motion.div>
<motion.div className="mobile-landing-nav">
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.div>
<Link className="hamburger" to="/mobile/"><motion.h1 className="cclogo-mobile" initial={{opacity: 0}} animate={{opacity: 1}} transition={{ duration: 2.5}}>CamCo</motion.h1></Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 2}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/about/">ABOUT</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 3}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/companies/">COMPANIES</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 4}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/philanthropy/">PHILANTHROPY</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 5}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/riseabove/">RISE ABOVE</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/team/">OUR TEAM</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/press/">PRESS</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 7}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/contact/">CONTACT</Link>
</motion.div>
</motion.div>
</motion.div>
<motion.div className="background-container">
<motion.div className="background-image-x" initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 1 }}></motion.div>
<motion.img className="landing-background-image-x" key={BackgroundImage} src={BackgroundImage} initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 0.75 }}/>
</motion.div>
</div>
)
}
export default Home
我的scss文件:
html body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 800px) {
.nav-item {
display: none;
}
}
@media only screen and (min-width: 800px) {
.hamburger {
display: none;
}
}
.hamburger:hover {
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.mobile-landing-nav {
margin-top: 30px;
display: flex;
flex-direction: column;
}
}
@media only screen and (min-width: 768px) {
.mobile-landing-nav {
display: none;
}
}
.mobile-container {
display: flex;
flex-direction: column;
align-content: space-between;
margin-top: 1px;
margin-left: 30px;
}
.mobile-nav-spacing {
margin-left: 18px;
margin-top: 8px;
margin-bottom: 8px;
align-content: space-around;
}
.mobile-nav-item {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding-left: 4px;
text-decoration: none;
letter-spacing: 5px;
font-weight: 300;
font-size: 12px;
color: white;
border-bottom-color: white;
border-bottom-width: thick;
}
.nav-item {
display: fixed;
margin-left: 20px;
margin-right: 20px;
padding-left: 4px;
text-decoration: none;
letter-spacing: 5px;
font-weight: 300;
font-size: 12px;
color: white;
border-bottom-color: white;
border-bottom-width: thick;
}
.nav-item:hover {
text-decoration: none;
color: white;
}
.mobile-nav-item:hover {
text-decoration: none;
color: white;
}
.carousel-item {
background-color: blue;
width: 400px;
height: 400px;
}
button.navbar-toggler {
justify-content: center;
}
@media only screen and (max-width: 768px) {
// .mobile-landing-background-x {
// background: url("../../static/Untitled-1.jpg");
// object-fit: cover;
// min-width: 100%;
// min-height: 130%;
// height: 110%;
// position: fixed;
// bottom: -10%;
// right: 0;
// z-index: -4;
// }
.landing-background-image-x {
background: url("../../static/Untitled-1.jpg");
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -2;
}
.nav-background-image-x {
background: url("../../static/Untitled-1.jpg") 0 0 ;
// height: 900px;
// width: 4320px;
// animation: slide 90s linear infinite;
background-size: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -4;
}
.background-container div {
display: none;
}
.background-image-x {
background: url("../../static/Untitled-1.jpg");
// height: 100%;
// width: 300%;
// animation: slide 120s linear infinite;
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -3;
}
}
@media only screen and (min-width: 768px) {
.mobilel-landing-background-x {
display: none;
}
.nav-background-image-x {
// background: url("../../static/Untitled-1.jpg") repeat-x;
// height: 900px;
// width: 4320px;
// animation: slide 90s linear infinite;
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -4;
}
.background-image-x {
background: url("../../static/Untitled-1.jpg") repeat-x;
height: 900px;
width: 4320px;
animation: slide 90s linear infinite;
// object-fit: cover;
// min-width: 100%;
// min-height: 100%;
// height: 110%;
// position: fixed;
// bottom: -10%;
// right: 0;
z-index: -3;
}
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(1440px, 0, 0);
}
}
.background-container {
overflow: hidden;
z-index: -6;
}
@media only screen and (max-width: 768px) {
.mobile-background-image {
object-fit: cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 13%;
bottom: -10%;
right: 0;
z-index: -2;
}
.background-container div {
display: none;
}
.background-image {
object-fit: cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 13%;
bottom: -10%;
right: 0;
z-index: -2;
}
}
@media only screen and (min-width: 768px) {
.background-container img {
display: none;
}
.mobile-background-image {
display: none;
}
.background-image {
background: url("../../static/Untitled-2.jpg") repeat-x;
height: 900px;
width: 4320px;
animation: slide 120s linear infinite;
position: fixed;
top: 6%;
bottom: -10%;
right: 0;
z-index: 1;
pointer-events: none;
}
.alt-background-image {
background: url("../../static/Untitled-2.jpg") repeat-x;
height: 120%;
width: 120%;
animation: slide 90s linear infinite;
position: fixed;
top: 6%;
bottom: -10%;
right: 0;
z-index: -4;
pointer-events: none;
}
}
.intro-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media only screen and (min-width: 768px) {
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.logo-container {
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 2.5%;
}
.cclogo {
color: white;
font-family: "georgia";
font-size: 300px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.cclogo-mobile {
margin-top: 5px;
margin-left: 35px;
color: white;
font-family: "georgia";
font-size: 40px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
text-decoration: none;
}
.cclogo-mobile:hover {
text-decoration: none;
color: white;
font-family: "georgia";
font-size: 40px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.tagline-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.tagline {
padding-left: 17px;
font-weight: 300;
letter-spacing: 6px;
font-size: 50px;
text-align: center;
text-shadow: 3px 3px 5px rgba(0,15,44,0.73);
}
.cta-section {
display: flex;
flex-direction: row;
justify-content: center;
}
.cta {
letter-spacing: 2px;
padding-left: 8px;
font-weight: 300;
text-shadow: 2px 2px 3px rgba(0,15,44,1);
padding-bottom: 0.4%;
}
@media only screen and (max-width: 768px) {
.logo-container {
display: none;
}
.cclogo {
display: none;
}
.tagline-container {
display: none;
}
.tagline {
display: none;
}
.intro-nav {
display: none;
}
.cta-section {
display: none;
}
.cta {
display: none;
}
}
@media only screen and (min-width: 768px) {
.logo-container-2 {
display: none;
}
}
任何帮助将不胜感激!!!
答案 0 :(得分:0)
在没有看到创建登陆页面导航的HTML的情况下,很难知道这是否是完整的答案,但是这些设置可能值得一看(可能还有其他设置)
@media only screen and (max-width: 768px) {
.mobile-landing-nav {
margin-top: 30px;
display: flex;
flex-direction: column;
}
}
@media only screen and (min-width: 768px) {
.mobile-landing-nav {
display: none;
}
}
一台尺寸为768x1024的IOS机器将通过两项测试,而使用的将是具有以下显示的机器:无。这是故意的吗?
还有其他一些东西,例如:
@media only screen and (min-width: 768px) {
.background-container img {
display: none;
}
一部768x1024的设备将会通过-因此它具有移动性,但足够大以至于不能移动?