current position:Home>Cool 3D photo album 520 Tanabata Valentine's Day confession web page production (HTML + CSS + JavaScript)

Cool 3D photo album 520 Tanabata Valentine's Day confession web page production (HTML + CSS + JavaScript)

2021-08-22 22:46:46 @. code out the future

Younger martial sister, call directly " That's too much " 520 Tanabata Valentine's Day confession web page production (HTML+CSS+JavaScript)

520 Tanabata Festival advertisement , That is Chinese Valentine's Day , What else can you do besides sending flowers ?? Come and make a high-end and high-grade confession web page

Tanabata Festival is a very romantic festival , It is said that the Cowherd and the weaver girl will meet on the magpie bridge on July 7 of the lunar calendar every year , So Tanabata is the Valentine's day that has been handed down in China since ancient times , On this day, if you have someone you like , You might as well summon up the courage to confess .

Introduction to works

1. Introduction to web works :520 Tanabata Valentine's day advertising website HTML , You can download what you like , The article page supports mobile phones PC Responsive layout . It can be used directly by replacing photos !

2. Web work editing : This work is the theme of Tanabata Valentine's day advertisement Web page design , The code is gorgeous and cool HTML+CSS+JavaScript Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. Technical aspects of web works : Use CSS Made cool star flashing highlights 、 The mouse can drag the picture and slide the effect 、 Use at the same time JavaScript Automatically switch the multi gradient color effect of the background picture ( Customizable replacement )、HTML Added background music ( Customizable replacement ),.

One 、 Demonstration of works

1.PC End computer end ( demonstration )

>>> Click to enter >>>100 Paragraph confession source code demonstration address

 Insert picture description here

1. Photo ball

 Insert picture description here

2. Spiral photos

 Insert picture description here

3. Photo wall

 Insert picture description here

4. Full screen photos

 Insert picture description here

5. Arrange in order

 Insert picture description here

2.H5 Mobile terminal ( demonstration )

 Insert picture description here
 Insert picture description here
 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation ( course )

1. This single page source code , It was carefully made by a programmer for his girlfriend , Friends in need can modify the source code and give her a different virtual gift .

2. The whole layout is very good , The display of mobile phone and computer is very good , I also like , Added The background music / Illusory background / Auto rotate album /, Background music can also make what you want to say , Or sing your own song . This is also very good .

html Album starry sky

Music replacement : If it needs to be replaced mp3 The background music , You can download it yourself and find mp3 Folder Replace it ~ Poke me >>> As a free download MP3
Be careful : The name of the downloaded music file needs to be modified and mp3 In a folder mp3 file Just keep your name consistent

     <div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
          <div id="background" class="wall"></div>
          <div id="midground" class="wall"></div>
          <div id="foreground" class="wall"></div>
          <div id="top" class="wall"></div>
    </div>
      <!--  background E -->
      <!--  music  -->
    <img id="music_ico" onclick="clickMusic()" src="static/image/music_ico.png" alt="" />
    <audio id="audio" style="display: none" src="mp3/bg_music.mp3" preload="auto" loop="loop" ></audio>

3D Photo album ( Make )

Making tutorials : Get ready 17 Photos ( You can customize 10-199 Zhang )
Album replacement : find img Folder Just replace the photo
Be careful : The photo suffix is .jpg
 Insert picture description here
Generate multiple photos and find js Under the document functions.js file find 46 That's ok :199 Is the number of photos to be generated , Math.round(Math.random() * 17 It's random 17 Zhang

//  Generating virtual data - Newly generated virtual data after modification -  Auto find static/image  Picture in   Add traversal  
for (var i = 0; i < 199; i++) {
    
    personArray.push({
    
        image: './static/image/' + Math.round(Math.random() * 17) + '.jpg'
    });
}

card - Analog photo push data

var img = document.getElementById('showImg')
var s = setInterval(function() {
    
    // get animate
    var rand_in = parseInt(Math.random() * _in.length, 10);
    var rand_out = parseInt(Math.random() * _out.length, 10);
    if (CurPersonNum >= personArray.length) {
    
        CurPersonNum = 0;
    }
    $('.show_info').show();
    $('.show_info').addClass(_in[rand_in]);
    setTimeout(function() {
    
        $('.show_info').removeClass(_in[rand_in]);
        ++CurPersonNum;
        setTimeout(function() {
    
            $('.show_info').addClass(_out[rand_out]);
            setTimeout(function() {
    
                $('.show_info').removeClass(_out[rand_out]);
                $('.show_info').hide();
                //  Change the displayed picture  
                img.setAttribute('src', './static/image/' +Math.round(Math.random() * 17) + '.jpg');
            }, 1000);
        }, 1000);
    }, 1000);
}, 4500);

css Starry sky

This code background: url("../bgimg/bg8.jpg") no-repeat; For the first time to show the background Self replaceable
Replace tutorial : Need to find bgimg Background image under folder , Or add the background picture you want

html, body {
    
  margin: 0;
  padding: 0;
}
audio {
    
  position: absolute;
  bottom: 0;
  opacity: 0.1;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

div#background {
    
  background: url("../bgimg/bg8.jpg") no-repeat;
  -webkit-animation: dd 100s linear infinite;
  -moz-animation: dd 100s linear infinite;
  -o-animation: dd 100s linear infinite;
  animation: dd 100s linear infinite;
}

div#midground {
    
  background: url("../bgimg/midground.png");
  z-index: 1;
  -webkit-animation: cc 100s linear infinite;
  -moz-animation: cc 100s linear infinite;
  -o-animation: cc 100s linear infinite;
  animation: cc 100s linear infinite;
}

div#foreground {
    
  background: url("../bgimg/foreground.png");
  -webkit-animation: cc 153s linear infinite;
  -o-animation: cc 153s linear infinite;
  -moz-animation: cc 153s linear infinite;
  animation: cc 153s linear infinite;
}

@-webkit-keyframes cc {
    
  from {
    
    background-position: 0 0;
  }
  to {
    
    background-position: 600% 0;
  }
}

@-o-keyframes cc {
    
  from {
    
    background-position: 0 0;
    transform: translateY(105px);
  }
  to {
    
    background-position: 600% 0;
  }
}


Javascript Switch mode automatically ( part )

function init() {
    
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 3000;
    scene = new THREE.Scene();
    // table
    for (var i = 0; i < table.length; i++) {
    
        var element = document.createElement('div');
        element.className = 'element';
        element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

        var img = document.createElement('img');
        img.src = table[i].image;
        element.appendChild(img);
        var object = new THREE.CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
        object.position.z = Math.random() * 4000 - 2000;
        scene.add(object);

        objects.push(object);

        //  Tables need to be sorted by coordinates 
        var object = new THREE.Object3D();
        // object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
        // object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
        object.position.x = (table[i].p_x * 140) - 1330;
        object.position.y = -(table[i].p_y * 180) + 990;

        targets.table.push(object);

    }

    // sphere

    var vector = new THREE.Vector3();
    var spherical = new THREE.Spherical();

    for (var i = 0, l = objects.length; i < l; i++) {
    

        var phi = Math.acos(-1 + (2 * i) / l);
        var theta = Math.sqrt(l * Math.PI) * phi;

        var object = new THREE.Object3D();

        spherical.set(800, phi, theta);

        object.position.setFromSpherical(spherical);

        vector.copy(object.position).multiplyScalar(2);

        object.lookAt(vector);

        targets.sphere.push(object);

    }

    // helix

    var vector = new THREE.Vector3();
    var cylindrical = new THREE.Cylindrical();

    for (var i = 0, l = objects.length; i < l; i++) {
    

        var theta = i * 0.175 + Math.PI;
        var y = -(i * 5) + 450;

        var object = new THREE.Object3D();

        //  Parameter one   The size of the circle   Parameter two   Left and right space   Parameter 3   Distance between top and bottom 
        cylindrical.set(900, theta, y);

        object.position.setFromCylindrical(cylindrical);

        vector.x = object.position.x * 2;
        vector.y = object.position.y;
        vector.z = object.position.z * 2;

        object.lookAt(vector);

        targets.helix.push(object);

    }

    // grid

    for (var i = 0; i < objects.length; i++) {
    

        var object = new THREE.Object3D();

        object.position.x = ((i % 5) * 400) - 800; // 400  The left and right spacing of the picture  800 x Axis center store 
        object.position.y = (-(Math.floor(i / 5) % 5) * 300) + 500; // 500 y Axis center store 
        object.position.z = (Math.floor(i / 25)) * 200 - 800; // 300 adjustment   Slice spacing  800z Axis center store 

        targets.grid.push(object);

    }

    // Rendering 
    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(renderer.domElement);

    //  Mouse control 
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.5;
    controls.minDistance = 500;
    controls.maxDistance = 6000;
    controls.addEventListener('change', render);

    //  Automatic replacement 
    var ini = 0;
    setInterval(function() {
    
        ini = ini >= 3 ? 0 : ini;
        ++ini;
        switch (ini) {
    
            case 1:
                transform(targets.sphere, 1000);
                break;
            case 2:
                transform(targets.helix, 1000);
                break;
            case 3:
                transform(targets.grid, 1000);
                break;
        }
    }, 10000);

}

Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web front end Zero basis - Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... and 、 The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduates HTML Templates 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

6、 ... and 、 More advertising source code

1.100 paragraph html+css+JavaScript Declare the source code demonstration address

2.520 A birthday present for your girlfriend on Valentine's Day ~html+css+js Realize the cool cherry blossom of shaking sound 3D Photo album ( Including music )

3. One line of code teaches you to catch your sister easily ~html+css+js Fireworks advertisement 3D Photo album ( Including music + Customizable text )

4. 520 Valentine's Day present for her ~html+css+javascript Flying snow 3D Photo album ( Including music )

5. 520 Watch the meteor shower with her on Valentine's Day ~html+css+javascript Making meteor shower 3D Photo album ( Including music )

6. html+css+js Happy birthday website template (520/ Valentine's day on Chinese Valentine's day / A confession / To marry him / Happy birthday, ) With background music

7. html+css+js Happy birthday, ~ Happy birthday for programmers html Templates ( Including birthday background music )

8. Girlfriend's birthday HTML+css3+js Realize the cool cherry blossom of shaking sound 3D Photo album ( With background music ) A programmer must declare himself

9. How do I use a line of code to express my sister 520 For your girlfriend on Valentine's day 3D Cherry rain photo album gift ( Programmer confession exclusive )

10. Valentine's day on Chinese Valentine's day ~html+css+javascript Realize the full screen love effect ( Programmer's confession )

11. Tanabata Valentine's Day flower advertising animation (HTML+CSS+JavaScript)

12. html+css+js Make a wedding countdown web page template (520/ Valentine's day on Chinese Valentine's day / Programmer advertisement )

13. html+css+javascript Make love confession code (520/ Valentine's day on Chinese Valentine's day / A confession / a birthday present )

14. Stunning html+css+javascript Phantasm 3D Photo album ( With background music ) A programmer must declare himself _520_ Valentine's day on Chinese Valentine's day

15. html+css+javascript Realization 100 Super cool advertising source code (520/ The seventh evening of the seventh moon / A confession / To marry him / Take off a single ) Programmers must

16. html+css+javascript Realization 520 Advertising love tree ( Including music ) A programmer must declare himself

17. html+css+javaScript Achieve cool fireworks confession ( Cloud particle text 3D start )

18. The programmer 520 A confession Html+Js+Css Petal album web page template programmer must express

19. html+css+javascript Realize the heaven and earth Bagua feng shui compass clock ( Free with source code )

20. html+css+javascript To achieve the tiktok clock ( Free with source code )

21. Tiktok JavaScript Realize the network red astronaut dial ~ Look at how programmers use code to make Huawei space watches

22. html+css+js Draw snow in winter 3D Photo album (520 Valentine's Day / Valentine's day on Chinese Valentine's day / Programmer's confession html Code )

23. Make a romantic and warm birthday gift for her ~html+css+javascript Blue dream ocean 3D Photo album ( Including music )

24. html+css+js Make 520 Express the web page , Full screen love and white language web page animation code , romantic 520 Love expression animation special effects .

25. 520 Valentine's Day programmer's romantic confession ~html+css+js Romantic starry love 3D Photo album ( Including music )

26. Html5 Romantic wedding invitation wedding website template _ Love her and give her the most beautiful H5 Wedding invitation _( Wedding electronic invitation ) With background music

27. html+css+javascript Full screen snowflake love 520 Confession website ( Including music )520 A confession / Valentine's day on Chinese Valentine's day / a birthday present / A programmer must declare himself

28. 520 Tanabata Valentine's Day code gave a gift to his girlfriend ~html+css+javascript Realize Cherry Blossom love album 「 You can take it to the person you like 」

29. Tanabata Valentine's day teaches you how to confess ~html+css+js Making beautiful stars 3D Photo album ( Including music ) The programmer 520 Confession essential

30. html+css+javascript Happy birthday fireworks 520/ Confession / Valentine's day on Chinese Valentine's day / Proposal only ( Custom text )

31. One line of code teaches you how to advertise on Tanabata Valentine's Day — Comic 3D Photo album ( music + written words )HTML+CSS+JavaScript

32.HTML+CSS+JavaScript Make Tanabata confession web page ( Including music + Custom text )

33. Birthday present for Xuemei ~ Make a super romantic advertisement 3D Photo album (HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript Making romantic balloons 520 Advertising album

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822224644078b.html

Random recommended