Defiler des noms de condo

code PHP : 

function wpc_cinema_scroll_installations_v3() {
ob_start();

// 1. VOS PROJETS À MIAMI
$etablissements = [
[‘nom’ => ‘Porsche Design Tower’, ‘lieu’ => ‘Sunny Isles Beach’, ‘type’ => ‘Luxury Condo’],
[‘nom’ => ‘Icon Brickell’, ‘lieu’ => ‘Miami Financial District’, ‘type’ => ‘Residential Condo’],
[‘nom’ => ‘High-End Boutique’, ‘lieu’ => ‘Design District’, ‘type’ => ‘Commercial Showroom’],
[‘nom’ => ‘Continuum South Beach’, ‘lieu’ => ‘Miami Beach’, ‘type’ => ‘Penthouse Residence’],
[‘nom’ => ‘Modern Office Lobby’, ‘lieu’ => ‘Coral Gables’, ‘type’ => ‘Commercial Space’],
[‘nom’ => ‘Paramount Worldcenter’, ‘lieu’ => ‘Downtown Miami’, ‘type’ => ‘Luxury Condo’],
[‘nom’ => ‘Marquis Miami’, ‘lieu’ => ‘Downtown Miami’, ‘type’ => ‘Residential Tower’],
[‘nom’ => ‘Epic Residences’, ‘lieu’ => ‘Brickell’, ‘type’ => ‘Luxury Condo’],
];

// Duplication de la liste pour la boucle infinie
$liste_doublee = array_merge($etablissements, $etablissements);
?>

<div class= »osc-cinema-section »>
<!– LE TITRE EN HAUT DU BLOC –>
<h2 class= »osc-cinema-header »>
OneStretchCeiling <strong>Miami</strong> &gt;&gt;&gt; Our Installations
</h2>

<!– LE CONTENEUR DU GÉNÉRIQUE –>
<div class= »osc-credits-wrapper »>
<div class= »osc-credits-gradient-top »></div>

<div class= »osc-credits-container »>
<div class= »osc-credits-scroll »>

<!– LE RUBAN GAUCHE (BLANC FLASH) –>
<div class= »osc-film-strip osc-strip-left »></div>

<!– LA LISTE DES TEXTES –>
<div class= »osc-text-list »>
<?php foreach ($liste_doublee as $item) : ?>
<div class= »osc-credits-item »>
<span class= »osc-item-meta »><?php echo esc_html($item[‘type’]); ?> &bull; <?php echo esc_html($item[‘lieu’]); ?></span>
<h3 class= »osc-item-title »><?php echo esc_html($item[‘nom’]); ?></h3>
</div>
<?php endforeach; ?>
</div>

<!– LE RUBAN DROIT (BLANC FLASH) –>
<div class= »osc-film-strip osc-strip-right »></div>

</div>
</div>

<div class= »osc-credits-gradient-bottom »></div>
</div>
</div>

<!– LE STYLE CSS CORRIGÉ –>
<style>
.osc-cinema-section {
width: 100%;
max-width: 700px;
margin: 0 auto;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}

/* Style et visibilité du titre */
.osc-cinema-header {
text-align: center;
color: #ffffff !important; /* Force la couleur blanche */
font-size: 22px !important;
font-weight: 300;
letter-spacing: 1.5px;
margin-bottom: 30px !important;
text-transform: uppercase;
display: block !important;
visibility: visible !important;
}

.osc-cinema-header劇 strong {
font-weight: 700;
color: #00a3ff; /* Accentuation sur le mot Miami */
}

/* Cadre de visionnage */
.osc-credits-wrapper {
position: relative;
width: 100%;
height: 400px;
background: #000000; /* Fond noir pur pour faire ressortir le blanc */
border: 2px solid #222222;
border-radius: 4px;
overflow: hidden;
}

.osc-credits-container {
width: 100%;
height: 100%;
}

/* Animation de défilement */
.osc-credits-scroll {
position: relative;
display: block;
width: 100%;
animation: scrollCinema 11s linear infinite;
}

.osc-credits-wrapper:hover .osc-credits-scroll {
animation-play-state: paused;
}

.osc-text-list {
display: flex;
flex-direction: column;
gap: 45px;
align-items: center;
text-align: center;
padding: 40px 70px;
}

/* LES RUBANS LATÉRAUX BLANCS (Correction visuelle) */
.osc-film-strip {
position: absolute;
top: 0;
width: 30px;
height: 100%;
background-color: #ffffff; /* Fond du ruban blanc */
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;

/* Trous de la pellicule (carrés noirs sur fond blanc) */
background-image: linear-gradient(to bottom, transparent 10px, #000000 10px, #000000 25px, transparent 25px);
background-size: 100% 35px;
opacity: 0.95; /* Très visible */
}

.osc-strip-left { left: 20px; }
.osc-strip-right { right: 20px; }

/* Textes du générique */
.osc-credits-item {
width: 100%;
}

.osc-item-meta {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #888888;
margin-bottom: 5px;
}

.osc-item-title {
color: #ffffff;
font-size: 24px;
font-weight: 300;
margin: 0;
letter-spacing: 1px;
}

/* Effets de fondu haut/bas */
.osc-credits-gradient-top {
position: absolute;
top: 0; left: 0; width: 100%; height: 80px;
background: linear-gradient(to bottom, #000000 20%, transparent 100%);
z-index: 3;
pointer-events: none;
}

.osc-credits-gradient-bottom {
position: absolute;
bottom: 0; left: 0; width: 100%; height: 80px;
background: linear-gradient(to top, #000000 20%, transparent 100%);
z-index: 3;
pointer-events: none;
}

@keyframes scrollCinema {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}

/* Responsive Mobile */
@media (max-width: 768px) {
.osc-cinema-header { font-size: 16px !important; }
.osc-item-title { font-size: 19px; }
.osc-text-list { padding: 40px 50px; }
.osc-film-strip { width: 20px; }
.osc-strip-left { left: 8px; }
.osc-strip-right { right: 8px; }
}
</style>

<?php
return ob_get_clean();
}
add_shortcode(‘cinema_installations_v3’, ‘wpc_cinema_scroll_installations_v3’);