masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Tukar warna teks semasa menatal
P粉983021177
P粉983021177 2024-03-28 22:55:23
0
1
341

Saya sedang membuat laman web portfolio dan saya mahu teks tetap saya menukar warnanya di beberapa bahagian, bagaimana saya boleh melakukannya? Saya tidak boleh menghantar kod saya kerana ia terlalu besar dan panjang, tetapi alangkah baiknya jika anda boleh memberikan contoh kod, ini adalah rupanya (https://olaolu.dev), anda boleh melihat bagaimana butang dan nama ada dalam Tukar warna sambil menatal :)

P. Sila gunakan js untuk melakukannya, terima kasih!

Saya cuba cari maklumat tapi tak jumpa :(

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

    <section class="section-top active" id="s1">
        
        <div class="details">
            <div class="top">
                <h2>Faxraddin</h2>
                <div class="lists">
                    <div class="nav-btn" id="nav-icon1" onclick="document.getElementById('nav-icon1').classList.toggle('open')">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="hide-it">
                    <div class="hide1">
                        <div class="p1">
                            <a class="hide1-btn">My Work</a>
                            <a class="hide1-btn">My Shelf</a>
                            <a class="hide1-btn">My Resume</a>
                        </div>
                         
                        <div class="p2">
                            <a class="hide-span">SAY HELLO</a>
                            <a class="hide-span">[email protected]</a>
                            <a class="hide-span">t/me.com</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="first-info">
                <div class="first-sec">
                    <h1>Frontend</br> Developer.</h1>
                    <h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
                </div>
                <img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
            </div>

            <div class="some-info">
                <div class="a1">
                    <span>Highly skilled at progressive
                enhancement, design systems &
                UI Engineering.
                    </span>
                    <span>Over a decade of experience
                building products for clients
                across several countries.
                    </span>
                </div>

                <div class="btn-container">
                    <ul>
                        <a class="a" href="#s1"><div class="btn"></div></a>
                        <a class="a" href="#s2"><div class="btn"></div></a>
                        <a class="a" href="#s3"><div class="btn"></div></a>
                        <a class="a" href="#s4"><div class="btn"></div></a>
                        <a class="a" href="#s5"><div class="btn"></div></a>
                    </ul>
                </div>
            </div>

        </div>
    </section>

     
     <section class="what-do" id="s2">
         <div class="my-info">
            <div class="what-doing" id="i1">
                <h1>Design</h1>
                <p>
                    I'm probably not the typical designer positioned behind an Illustrator artboard adjusting pixels, but I design. Immersed in stylesheets tweaking font sizes and contemplating layouts is where you'll find me (~_^). I'm committed to creating fluent user experiences while staying fashionable.
                </p>
            </div>
            <div class="what-doing" id="i2">
                <h1>Engineering</h1>
                <p>
                    In building JavaScript applications, I'm equipped with just the right tools, and can absolutely function independently of them to deliver fast, resilient solutions optimized for scale — performance and scalabilty are priorities on my radar
                </p>
            </div>
         </div>
     </section>

    <section class="exp" id="s3">
        <div class="e1">
            <div class="exp-info">
                <h2>Over the</br> past 3 years,</h2>
                <p>I've built products for companies and businesses around the globe ranging from marketing websites to complex solutions and enterprise apps with focus on fast, elegant and accessible user experiences.</p>
                <p>Currently, I work at Shopify as a Senior UX Developer and Accessibility advocate crafting thoughtful and inclusive experiences that adhere to web standards for over a million merchants across the world.</p>
                <p>Before now, I was Principal Frontend Engineer at hellotax, where I worked on a suite of tools and services tailored at providing fast, automated VAT Registration / filings & Returns solutions for multi-channel sellers across Europe.</p>
                <p>Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.</p>
                <p>I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.</p>
            </div>
            <img class="exp-img" src="/b/images/2634454 copy.pdf">
        </div>
    </section>

    <section class="done" id="s4">
        <div class="grid">
            <div class="what-done">
                <div class="w1">
                    <h1>I buld & </br> deign stuff</h1>
                    <p>Open source 
                    projects, web apps 
                    and experimentals.
                    </p>
                    <button class="done-btn">see my work ---></button>
                </div>
                <div class="w2">
                    <h1>I write,</br>sometimes</h1>
                    <p>About design, 
                    frontend dev, 
                    learning and life.
                    </p>
                    <button class="done-btn">read my article ---></button>
                </div>
            </div>
        </div>
    </section>

    <section id="s5" class="send-me">
        <div class="send-container">
            <div class="send-top">
                <h1>Send me a message!</h1>
                <p>Got a question or proposal, or just want</br>
                    to say hello? Go ahead.</p>
            </div>
            <div class="send-inputs">
                <div class="l">
                    <label>Your Name</label>
                    <input type="text" placeholder="Enter your name">
                </div>

                <div class="l">
                    <label>Email Address</label>
                    <input type="text" placeholder="Enter your address">
                </div>
            </div>
            <div class="send-final">
                <input type="text" placeholder="Hi,i think we have to work together">
                <button class="shoot">SHOOT ---></button>
            </div>
        </div>
    </section>

    <section class="end-1" id="s6">
        <div class="end-container">
            <div class="end-info">
                <div class="e2" id="ll">
                    <span>SAY HELLO</span>
                    <span>[email protected]</span>
                    <span>t.me/mrolaolu</span>
                </div>
                <div class="e2">
                    <span>My Work</span>
                    <span>My Shelf</span>
                    <span>My Resume</span>
                </div>
            </div>
            <h2 class="end-link">© Faxraddin Olawuyi 2022</h2>
        </div>
    </section>

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


    body {
    margin: 0;
    padding: 0;
    scroll-snap-type: y mandatory;
}

html{
    scroll-behavior: smooth;
}

.bar1, .bar2, .bar3 {
    width: 2.5vw;
    height: .35vw;
    background-color: #333;
    margin: 6px 0;
    transition: 0.2s;
}


.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

section{
    scroll-snap-align: start;
}

.section-top{
    height: 47vw;
    padding-bottom: 10vw;
}

.details{
    background-color:#0b2361;
    background-repeat: no-repeat;
    background-size: 100vw 100%;
}

.top {
    display: flex;
    justify-content: space-between;
    padding: 1vw;
    padding-bottom: 6vw;
}

.top h2{
    font-size: 2.2vw;
    margin: 0;
    margin-top: 30px;
    margin-left: 60px;
    color:#e9ecf4;
    position: fixed;
    z-index: 3;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 3vw;
    cursor: pointer;
    position: fixed;
    right: 4.5vw;
    top:4vw;
    z-index: 3;
    padding-bottom: 2vw;
}

#l1{
    width: 3vw;
}

#l2{
    width: 2vw;
}

.first-info{
    display: flex;
    justify-content: space-between;
    width: 70vw;
    margin-left: 10vw ;
    padding-top: 30px;
}

.first-sec h1{
    font-size: 4.4vw;
    color: #f1554c;
}

.first-sec h3{
    width: 35vw;
    margin-top: -2vw;
    font-size: 1.5vw;
    color:#e9ecf4;
}

.my-img{
    width: 24vw;
    margin-top: 10px;
}

.a1{
    display: flex;
    justify-content: space-between;
    width: 35vw;
    margin-left: 10vw ;
    padding-top: 30px;
    color:#f1554c;
    margin-top: 20px;
    padding-bottom: 6.5vw;
    font-size: 1.3vw;
}

.a1 span{
    width: 45%;
    font-size: 1vw;
}


.some-info {
    display: flex;
    justify-content: space-between;
    width: 93vw;
}

.btn-container{
    position: fixed;
    z-index: 1;
    right: 0;
    padding-right: 5.5vw;
    margin-top: -3vw;
    
}

.btn-container ul{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn{
    margin:.7vw;
    cursor: pointer;
    z-index: 1;
    width: .2vw;
    height: .2vw;
    background-color: black;
    transform: rotate(45deg);
    border-style:solid;
    transition: 0.3s;
}

.what-do{
    background-repeat: no-repeat;
    background-size: 100vw 100%;
    height: 840px;
    background-color: #e9ecf4;
}

.my-info{    
    display: flex;
    margin-left: 7vw ;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-doing{
    width: 50%;
}

.what-doing h1{
    font-size: 4vw;
    color: #f1554c;
}

.what-doing p{
    font-size: 1.2vw;
    width: 30vw;
    margin-top: -2vw;
    color:#0b2361;
}

#i2{
    margin-top: 17vw;
    margin-left: 1vw;
}

.exp{
    height: 840px;
    background-color:#0b2361
}

.e1{
    display: flex;
    justify-content: space-between;
    width: 85vw;
    padding-top: 1vw;
    margin-left: -8vw;
    padding-bottom: 2vw;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.exp-info{
    display: flex;
    flex-direction: column;
    margin-left: 10vw;
    color: #e9ecf4;
}

.exp-info h2{
    font-size: 4.5vw;
    margin-bottom: 0;
}

.exp-info p{
    width: 25vw;
    font-size: 1.1vw;
}

.exp-img{
    height: 40vw;
    margin-top: 6vw;
}

.done{
    height: 840px;
    background-color:#e9ecf4;
}

.grid{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-done{
    display: flex;
    margin: auto;
    width: 90vw;
    height: 40vw;
    background-color: whitesmoke;
}

.w1{
    width: 50%;
    text-align: left;
    padding: 5vw;

}

.w2{
    width: 50%;
    text-align: left;
    padding: 5vw;
    border-left-style: solid;
    border-width: thin;
}

.w1 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w1 p{
    font-size: 2vw;
    color:#0b2361;
}

.w2 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w2 p{
    font-size: 2vw;
    color: #0b2361;
}

.done-btn{
    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
    margin-top: 3vw;
    color: #f1554c;
}

.hide-it{
    position: absolute;
    transition: 0.2s;
    background-color: white;
    height: 0;
    width: 25vw;
    position: fixed;
    right: 3vw;
    top:3vw;
    color: white;
}

.hide1{
    display: flex;
    flex-direction: column;
}

.p1{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.1;
}

.hide1-btn{
    border: none;
    background: none;
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.p2{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.9;
}

.hode-1{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.hide-span{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.active{
    visibility: visible;
    height: 34vw;
    z-index: 2;
    color: black;
}

.active2{
    visibility: visible;
}
 
.btn.active1{
    background-color: white;
    width: .7vw;
    height: .7vw;
    transform: rotate(0deg);
    border-radius: 4px;
}

#nav-icon1 {
    width: 4vw;
    height: 3vw;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
#nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 3.5vw;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2) {
    top: 18px;
  }
  
  #nav-icon1 span:nth-child(3) {
    top: 36px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  #nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
.send-me{
    height: 840px;
    background-color: #e9ecf4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send-top h1{
    font-size: 3.3vw;
    text-align: center;
    color: #f1554c;
}

.send-top p{
    font-size: 1.7vw;
    color:#0b2361;
    text-align: center;
    margin-top: -2vw;
    padding-bottom: 5vw;
}

.send-inputs{
    display: flex;
    justify-content: space-between;
    width: 50vw;
}

.send-inputs input{
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    width: 21vw;
    height: 2vw;
    font-size: 1.3vw;
    border-bottom: 5px solid black;
    border-width: thin;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.send-inputs label{
    font-size: 1vw;
}

.l{
    display: flex;
    flex-direction: column;
}

.send-final{
    padding-top: 4vw;
    width: 50.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
}

.send-final input{
    background: none;
    font-size: 1.3vw;
    width: 100%;
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    height: 2vw;
    border-width: thin;
    border-bottom: 5px solid black;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;
}

.shoot{
    border-width: thin;
    font-size: 1.3vw;
    border-color: black;
    margin-top: 4vw;
    width: 20vw;
    height: 4vw;

    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
}

.end-1{
    background-color: #0b2361;
    height: 830px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.end-container{
    display: flex;
    flex-direction: column;
    width: 80vw;
}

.end-info{
    border-width: thin;
    border-bottom: 5px solid #e9ecf4;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;

    display: flex;
}

.e2{
    display: flex;
    flex-direction: column;
    font-size: 1.5vw;
    color: #e9ecf4;
    padding: 4vw 0vw 8vw 0vw;
}

.e2 span{
    padding-top: 1.5vw;
}

#ll{
    margin-top:-3vw;
    padding-right: 19vw;
}

.end-link{
    color: #e9ecf4;
    padding-top: 3vw;
}

P粉983021177
P粉983021177

membalas semua(1)
P粉884548619
P粉8845486192024-03-29 13:33:33 Tingkat 1

Saya rasa apa yang anda perlukan ialah pemerhati persimpangan. Pemerhati Persimpangan membolehkan anda "melihat" sasaran dan bertindak balas apabila ia kelihatan.

Saya mencipta contoh kecil untuk menunjukkan perkara ini. Kami sedang menonton 第二节. Apabila ia kelihatan, kita menukar warna kepada ungu. Apabila ia tidak kelihatan, kita menukarnya kembali kepada hitam. 

const title = document.querySelector('.topbar__title');
const sectionOne = document.querySelector('.section--one');
const sectionTwo = document.querySelector('.section--two');

const observer = new IntersectionObserver((entry, observer) => {
  entry[0].isIntersecting > 0 ?
    title.style.color = sectionTwo.getAttribute('data-color') :
    title.style.color = sectionOne.getAttribute('data-color')
});

observer.observe(sectionTwo);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
  width: 100%;
  background-color: white;
}

.section {
  height: 150vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--one {
  background-color: white;
}

.section--two {
  background-color: rgb(255 0 0 / 5%);
}

  
Title






  
Section One






  
Section Two

Sudah tentu anda boleh memerhati beberapa bahagian, atau menukar kelas dan bukannya menggayakannya dengan JS. Ini contoh mudah sahaja...

MDN mempunyai beberapa maklumat yang baik tentang Pemerhati Persimpangan

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan