24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/English Version/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function () {
2 | /*
3 | * Main variables
4 | */
5 | var content = [{
6 | title: "I Have Crush On You!!",
7 | desc: ""
8 | }, {
9 | title: "I Have Crush On You!!",
10 | desc: "Maybe it's a pretty simple sentence, a sentence that holds a lot of hope and doubt behind it. There is hope that wants the feeling of love not to fall alone, there is also something that must be prepared in order to accept the consequences."
11 | }, {
12 | title: "",
13 | desc: "expressing feelings is a pretty serious thing, a lot will be sacrificed including the end result of releasing things that have been stored for a long time is quite a relief and not an easy thing. Here I just want to express my feelings for you, the problem is accepted or not it depends on you, I also won't expect more really."
14 | }, {
15 | title: "",
16 | desc: "If you uncomfortable just say, "I have a crush on you", if you already have a boyfriend, sorry... maybe that's all from me, hehe thanks for reading.feel"
17 | }, {
18 | title: "I Have Crush On You!!",
19 | desc: "I will wait for your reply :)"
20 | }];
21 | var currentPage = 0;
22 | //generate content
23 | for (var i = 0; i < content.length; i++) {
24 | //split content letters to array
25 | for (var obj in content[i]) {
26 | //if string
27 | if (typeof content[i][obj] === "string") {
28 | content[i][obj] = content[i][obj].split("");
29 | continue;
30 | }
31 | //if array (grouped text)
32 | else if (typeof content[i][obj] === "object") {
33 | var toPush = [];
34 | for (var j = 0; j < content[i][obj].length; j++) {
35 | for (var k = 0; k < content[i][obj][j].length; k++) {
36 | toPush.push(content[i][obj][j][k]);
37 | }
38 | }
39 | content[i][obj] = toPush;
40 | }
41 | }
42 | //set text to
43 | $("#segments").append("
");
44 | setText();
45 | //clone to data
46 | $("#segments").append("
");
47 | setText();
48 | }
49 | //initial arrangement
50 | arrangeCurrentPage();
51 | scrambleOthers();
52 | /*
53 | * Event handlers
54 | */
55 | $(window).resize(function () {
56 | arrangeCurrentPage();
57 | scrambleOthers();
58 | });
59 | $("#soup-prev").hide();
60 | $("#soup-prev").click(function () {
61 | $("#soup-next").show();
62 | currentPage--;
63 | if (currentPage === 0) {
64 | $("#soup-prev").hide();
65 | }
66 | arrangeCurrentPage();
67 | scrambleOthers();
68 | });
69 | $("#soup-next").click(function () {
70 | $("#soup-prev").show();
71 | currentPage++;
72 | if (currentPage === content.length - 1) {
73 | $("#soup-next").hide();
74 | }
75 | arrangeCurrentPage();
76 | scrambleOthers();
77 | });
78 | /*
79 | * Functions
80 | */
81 | function arrangeCurrentPage() {
82 | for (var i = 0; i < content[currentPage].title.length; i++) {
83 | $(".mutable:eq(" + currentPage + ") > .soup-title > .letter").eq(i).css({
84 | left: $(".position-data:eq(" + currentPage + ") > .soup-title > .letter").eq(i).offset().left + "px",
85 | top: $(".position-data:eq(" + currentPage + ") > .soup-title > .letter").eq(i).offset().top + "px",
86 | color: "#111",
87 | zIndex: 9001
88 | });
89 | }
90 | for (var i = 0; i < content[currentPage].desc.length; i++) {
91 | $(".mutable:eq(" + currentPage + ") > .soup-desc > .letter").eq(i).css({
92 | left: $(".position-data:eq(" + currentPage + ") > .soup-desc > .letter").eq(i).offset().left + "px",
93 | top: $(".position-data:eq(" + currentPage + ") > .soup-desc > .letter").eq(i).offset().top + "px",
94 | color: "#111",
95 | zIndex: 9001
96 | });
97 | }
98 | }
99 |
100 | function setText() {
101 | var j;
102 | for (j = 0; j < content[i].title.length; j++) {
103 | $(".soup-title").last().append("" + content[i].title[j] + "");
104 | }
105 | for (j = 0; j < content[i].desc.length; j++) {
106 | $(".soup-desc").last().append("" + content[i].desc[j] + "");
107 | }
108 | }
109 |
110 | function scrambleOthers() {
111 | for (var i = 0; i < content.length; i++) {
112 | //don't scramble currentPage
113 | if (currentPage === i)
114 | continue;
115 | var parts = [
116 | ["title", ".soup-title"],
117 | ["desc", ".soup-desc"]
118 | ];
119 | //apply to .title h1s and .desc ps
120 | for (var j = 0; j < parts.length; j++) {
121 | for (var k = 0; k < content[i][parts[j][0]].length; k++) {
122 | //define random position on screen
123 | var randLeft = Math.floor(Math.random() * $(window).width());
124 | var randTop = Math.floor(Math.random() * $(window).height());
125 | //defining boundaries
126 | var offset = $(".position-data").eq(currentPage).offset();
127 | var bounds = {
128 | left: offset.left,
129 | top: offset.top,
130 | right: $(window).width() - offset.left,
131 | bottom: $(window).height() - offset.top
132 | };
133 | var middleX = bounds.left + $(".position-data").eq(currentPage).width() / 2;
134 | var middleY = bounds.top + $(".position-data").eq(currentPage).height() / 2;
135 | //finally, apply all the scrambles
136 | $(".mutable:eq(" + i + ") > " + parts[j][1] + " > .letter").eq(k).css({
137 | left: randLeft,
138 | top: randTop,
139 | color: "#DDD",
140 | zIndex: "initial"
141 | });
142 | }
143 | }
144 | }
145 | }
146 | });
--------------------------------------------------------------------------------
/English Version/style.css:
--------------------------------------------------------------------------------
1 | #soup-nav {
2 | position: absolute;
3 | left: 0;
4 | right: 0;
5 | bottom: 32px;
6 | z-index: 9002;
7 | font-size: 64px;
8 | cursor: pointer;
9 | }
10 |
11 | .soup-title {
12 | font-size: 32px;
13 | }
14 |
15 | .soup-desc {
16 | font-size: 16px;
17 | }
18 |
19 | html,
20 | body {
21 | width: 100%;
22 | height: 100%;
23 | background-color: #eee;
24 | color: #111;
25 | text-align: center;
26 | font-family: "Open Sans", sans-serif;
27 | overflow: hidden;
28 | }
29 |
30 | #soup-container {
31 | width: 100%;
32 | height: 100%;
33 | min-width: 320px;
34 | min-height: 480px;
35 | position: relative;
36 | }
37 |
38 | .letters-wrap {
39 | position: absolute;
40 | overflow: hidden;
41 | display: inline-block;
42 | }
43 | .letters-wrap.mutable {
44 | width: 100%;
45 | height: 100%;
46 | top: 0;
47 | left: 0;
48 | }
49 | .letters-wrap.mutable .letter {
50 | position: absolute;
51 | left: 0;
52 | top: 0;
53 | transition: left 2s, top 2s, color 2s;
54 | color: "#AAA";
55 | }
56 | .letters-wrap.mutable .letter.active {
57 | color: "#111";
58 | z-index: 9001;
59 | }
60 | .letters-wrap.position-data {
61 | top: 50%;
62 | left: 50%;
63 |
64 | visibility: hidden;
65 | transform: translate(-50%, -50%);
66 | }
67 |
68 | .segment {
69 | position: absolute;
70 | top: 0;
71 | left: 0;
72 | width: 100%;
73 | height: 100%;
74 | }
75 |
76 | button {
77 | z-index: 9001;
78 | position: relative;
79 | cursor: pointer;
80 | }
81 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Dzarel Developer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # TextForCrush
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Text For You
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function () {
2 | /*
3 | * Main variables
4 | */
5 | var content = [{
6 | title: "I Have Crush On You!!",
7 | desc: ""
8 | }, {
9 | title: "I Have Crush On You!!",
10 | desc: "mungkin itu sebuah kalimat yg cukup simple, kalimat yang menyimpan banyak harapan juga keraguan dibaliknya. ada harapan yg ingin rasa suka itu tidak jatuh sendirian, juga ada yg harus disiapkan agar bisa menerima konsekuensinya."
11 | }, {
12 | title: "",
13 | desc: "menyatakan perasaan itu hal yg cukup serius, banyak yg akan dikorbankan termasuk hasil akhirnya melepas hal yg sudah Iama tersimpan itu cukup melegakan dan bukan hal yg mudah.Disini Aku cuman mau ungkapin perasaan aku sama kamu,masalah diterima atau ngga itu tergantung kamu nya,aku juga gak bakal berharap lebih kok"
14 | }, {
15 | title: "",
16 | desc: "Kalau Kamu Risih Bilang yahh,'I Have Crush On You',Semisal kamu udah punya pacar maaf yaa karna udah confess ke kamu...mungkin segitu saja dari aku,hehe makasih yaa sudah mau dibaca."
17 | }, {
18 | title: "I Have Crush On You!!",
19 | desc: "Aku tunggu Balasan Mu:)"
20 | }];
21 | var currentPage = 0;
22 | //generate content
23 | for (var i = 0; i < content.length; i++) {
24 | //split content letters to array
25 | for (var obj in content[i]) {
26 | //if string
27 | if (typeof content[i][obj] === "string") {
28 | content[i][obj] = content[i][obj].split("");
29 | continue;
30 | }
31 | //if array (grouped text)
32 | else if (typeof content[i][obj] === "object") {
33 | var toPush = [];
34 | for (var j = 0; j < content[i][obj].length; j++) {
35 | for (var k = 0; k < content[i][obj][j].length; k++) {
36 | toPush.push(content[i][obj][j][k]);
37 | }
38 | }
39 | content[i][obj] = toPush;
40 | }
41 | }
42 | //set text to
43 | $("#segments").append("
");
44 | setText();
45 | //clone to data
46 | $("#segments").append("